Fw: [心得] 利用Jquery(javascript)達成網頁表格排序

看板Ajax作者AlbertPujo1s (3000萬USD)時間14年前 (2012/03/22 09:40)推噓2(2推 0噓 1→)

留言3則, 2人參與討論串1/1

※ [本文轉錄自 Web_Design 看板 #1FQeB2UZ ] 作者: AlbertPujo1s (3000萬USD) 看板: Web_Design 標題: [心得] 利用Jquery(javascript)達成網頁表格排序時間: Thu Mar 22 09:39:11 2012 利用Jquery(javascript)達成網頁表格排序功能(table sort) 網誌好讀版: http://airnote.istory.tw/2012/03/tablesort-jqueryjavascript.html 最近剛好在進行一些網頁設計的工作，其中有牽扯到資料表格排序的問題，一般都是直接在query資料庫時直接排序，或是用php排序，但是只要重新排序一次就等於網頁重新讀取一次（重新做一次計算），所以就想利用 Jquery(javascript) 來減少資源的消耗。這邊就分享一個簡單的Jquery(javascript)通用表格排序的程式。程式原理：此程式主要是排序已經存在的html table，先讀取每個表格內的內容然後做排序，最後在修改原本表格的內容。使用方法： 0.假設目前網站有兩個表格 Name Score Stella 85 Andy 100 Melo 59 Sophie 95 Alice 55 ================================================================== Name Score Marry 100 Apple 85 Melo 59 Sophie 95 Alice 55 1.先引入jquery <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"> </script> 2.將程式載入 <script type="text/javascript"> /**************** Javascript function with jquery *************** Function name: table_sort([select_table_name]) Author: Andy History: 2012/03/22 First relased at AirNote ****************************************************************/ function table_sort(select){ var table_data = new Array() $(select+" tr:gt(0)").each(function(){ var i = table_data.length table_data[i] = new Array() $(this).find("td").each(function(){ var j = table_data[i].length table_data[i][j] = new Object() table_data[i][j].value = $(this).html() table_data[i][j].className = $(this).attr("class") if(table_data[i][j].className == undefined) table_data[i][j].className = "" if(table_data[i][j].value == undefined) table_data[i][j].value = "" }) }) var sort_asc = 1; $(select+" tr:eq(0) td,"+select+" tr:eq(0) th").click(function(){ sort_asc *= -1 var idx = $(this).index() var sort_type = (table_data[0][idx].value[0].charCodeAt(0) > 47 && table_data[0][idx].value[0].charCodeAt(0) < 58) ? "num":"text" table_data.sort(function(a,b){ if(a[idx].value == "") return (-1)*sort_asc if(sort_type == "num"){ return (a[idx].value - b[idx].value)*sort_asc }else{ var compare_length = a[idx].value.length > b[idx].value.length ? a[idx].value.length : b[idx].value.length for(var i=0;i < compare_length;i++){ var a_code = a[idx].value.charCodeAt(i) var b_code = b[idx].value.charCodeAt(i) if(a_code == b_code && i == (compare_length - 1)) return (a[idx].value.length > b[idx].value.length ? -1 : 1)*sort_asc else if(a_code != b_code) return (a_code - b_code)*sort_asc } } }) var i = 0 var j = 0 $(select+" tr:gt(0)").each(function(){ $(this).find("td").each(function(){ $(this).html(table_data[i][j].value) $(this).attr("class",table_data[i][j].className) j++ }) j=0 i++ }) }) } </script> 3.呼叫設定排序 function table_sort("#mytable") 參數為選取表格的名稱，用法與CSS選擇相同，請使用#選擇 Id name EX: #myTable 這樣套用的表格，點擊最上面一列就可以整欄排序 4. 完成！！觀看範例: http://m.istory.tw/published/table_sort.html PS 1. 此程式會自動判斷欄位的第一個字元，為數字則數字排列，為文字則文字排列。還有其他問題的話都可以發問喔！！ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.113.239.247 ※ 發信站: 批踢踢實業坊(ptt.cc) ※ 轉錄者: AlbertPujo1s (140.113.239.247), 時間: 03/22/2012 09:40:02