您的位置:首页 > Web前端 > JQuery

Jquery tablesorter,table排序

2010-05-29 23:11 281 查看
Jquery+tablesort 实现客服端的排序,能减轻服务器的承受能力,也能给用户带来很好的体验,所以推荐用 Jquery tablesort来实现分页和排序了
Jquery tablesort 支持页面类table静态排序,无刷新,调用也很方便(支持字符串,数字,日期,等格式)
唯一的要求,就是html的table标签内要包含thead和tbody部分,这可以调用HTML_Table::getHeader()生成thead,调用HTML_Table::getBody()生成tbody部分。
然后在需要展示数据的页面引入jQuery和Tablesorter的js库文件,再加上几行代码即可实现客户端javascript对数据table的分页与排序,并且还支持动态修改每页数据行数,支持多列排序等。

具体的例子和代码,都可以在本文的链接中找到,就不在这里多说了。

示例地址:http://www.aquna.com/0518/jquery/Jquer-tablesorter.html

只需要设置table的id,部分代码:
$(document).ready(function() {
$.tablesorter.defaults.widgets = ['zebra']; 隔行换色的颜色
$("#myTable").tablesorter({ myTable为table的Id
textExtraction: function(node) {
return $(node).find(".findeValue").html();
} ,
headers: {
5: { sorter: false }
}
});
});

Table 格式如下:

<table class="tablesorter" cellspacing="1">
<thead> <tr>
<th>
first name</th><th>last name</th><th>
age</th>
<th>total</th><th>discount</th><th>date</th></tr>
</thead>
<tbody>
<tr><td>peter</td>
<td>parker</td><td>28</td>
<td>$9.99</td><td>20%</td>
<td>jul 6, 2006 8:14 am</td></tr>
</tbody>
</table>

官方示例地址:http://docs.jquery.com/Plugins/Tablesorter/tablesorter
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: