作者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
1F：→ Canboo:基本上如果资料有分页的话，tablesorter就很难用了 03/22 13:00
3F：→ tyf99:应该要判断整个 column 的内容，才决定排序的是文字或数字 03/25 01:14
4F：→ dingyuchi:用datatable 03/28 23:42