作者AlbertPujo1s (3000万USD)
看板Ajax
标题Fw: [心得] 利用Jquery(javascript)达成网页表格排序
时间Thu Mar 22 09:40:02 2012
※ [本文转录自 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
1F：推 mrbigmouth:jquery有个非常强悍的套件叫datatable 03/22 16:34
2F：→ coldollsheep:倒是楼上这个东西没看过 03/23 13:50
3F：推 coldollsheep:看了一下，不错 03/23 13:55