JQuery页面数据排序

最新推荐文章于 2021-03-28 15:41:14 发布

iteye_14370

最新推荐文章于 2021-03-28 15:41:14 发布

阅读量477

点赞数

分类专栏： html 文章标签： jQuery ViewUI

html 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用jQuery Tablesorter插件为网页表格添加排序功能。通过简单的步骤即可实现对表格数据的升序或降序排列，并提供了一个示例代码。此外，文章还提到了对Double类型及中文的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面对数据进行排序不是一件难事。其实有很多种方法可以实现，比如Jquery插件tablesorter，不过这个插件只能对一些简单的整形数据排序。如果是Double型的就有bug.比如数据有22.2,2.2,2.0这样的话它排序是错误的。另外它对中文排序也不支持。附件里的插件是在原有的基础上改的。解决了这些问题。要让页面数据排序只需几步
第一步引入附件的两js文件，在页面加载时创建排序对象
<script>
$(document).ready(function() {
$("table").tablesorter({sortList: [[0,0]] });
});
</script>
tablesorter（）构造函数有很多参数。自己可以看一下。这儿的sortList: [[0,0]]
意思是对表格第一行第一列进行默认的排序asc,后面也可以加,[1,0]对多一列进行排序
第二步就是把表格第一行的用 <thead>包起来。并把包起来的td改成th,改成th后才能排序如果不想对某列排序的还是用td就可以不对排序了
第三步就是对list，也就是表格第二行用 <tbody>包起来。
列子：
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
<table id="myTable">
<thead>
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
<th>第4列</th>
<th>第一列</th>
</tr>
</thead>
<tbody>
<tr>
<td>momo</td>
<td>21</td>
<td>momo@mo.com</td>
<td>$6500.00</td>
<td>http://www.iteye.com</td>
</tr>

</body>
<table>

这样就可以对页面数据进行排序了。另外也有对页面进行分页的。也是才插件。不过js文件没有拷贝进来。
更多说明请参考官方文档：http://tablesorter.com/docs/
官方示例：http://tablesorter.com/docs/#Examples