Sortberg.js是一个轻量级、快速的jQuery表排序插件,它可以根据数据值自动选择合适的排序方法(按顺序或升序),并支持具有行span/colspan的复杂表。
1.下载并加载jquery.sortberg.js查询
在jQuery之后。
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.sortberg.js"></script>
2.调用函数sortberg公司
在HTML表上,插件将完成其余工作。
<table> <thead> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </tbody> </table>
$(function(){ $('table').sortberg(); });
3.它还支持分组数据,如下所示:
<table> <thead> <tr> <th>Name</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>+1 234-567-8901</td> </tr> <tr class="grouped"> <td colspan="2">Additional Info For Alice</td> </tr> <tr> <td>Bob</td> <td>+1 987-654-3210</td> </tr> <tr class="grouped"> <td colspan="2">Additional Info For Bob</td> </tr> </tbody> </table>
$(function(){ $('table').sortberg({ // default: 'details' groupClass: 'grouped' }); });
4.确定是否忽略区分大小写。默认值:false。
$(function(){ $('table').sortberg({ ignoreCase: true, }); });
5.添加您自己的排序逻辑。
var myLogic = function(a, b){ return $(a).data('specialdata') - $(b).data('specialdata'); }; $('table').sortberg({ comparator: myLogic });
2022-08-03