当前位置: 首页 > 工具软件 > tablesorter > 使用案例 >

Jquery tablesorter,table排序

卫松
2023-12-01

 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  

 类似资料: