Jquery tablesorter,table排序

 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  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值