DDR爱好者之家 Design By 杰米
一、引入文件
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.tablesorter.js"><!-- 引入以下样式则表头出现排序图标，同时引入图片 -->
<link href="css/style.css" rel="stylesheet" type="text/css" >
效果如图：
二、标准的HTML表格，必须包括thead和tbody标签
复制代码 代码如下:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhangsan</td>
<td>boy</td>
<td>beijing</td>
</tr>
<tr>
<td>lisi</td>
<td>girl</td>
<td>shanghai</td>
</tr>
<tr>
...略
</tr>
</tbody>
</table>
三、设置table可排序
复制代码 代码如下:
$(document).ready(function(){
//第一列不进行排序(索引从0开始)
$.tablesorter.defaults.headers = {0: {sorter: false}};
$(".tablesorter").tablesorter();
});
官方文档：http://tablesorter.com/docs/
补充说明：
在使用过程遇到的一个问题，我的表格数据是通过ajax获取的，首页进行排序的时候没问题
当进行下一页排序的时候，会把上页的数据也重新显示出来，解决这个问题可以在你ajax获取数据之后
触发"update"事件，代码如下：
复制代码 代码如下:
$(".tablesorter").trigger("update");
以上问题着实头疼了很久，刚开始用的官网上的Pager plugin，发现这个不太合适。
又网上查资料 整理以下代码：
复制代码 代码如下:
$(".tablesorter tbody tr").addClass("delete");
$(".tablesorter tbody tr.delete").remove();
$("table tbody").append(html);
$(".tablesorter").trigger("appendCache");
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("sorton",[[[2,1],[0,0]]]);
于是都用上了，久经测试 发现只有$(".tablesorter").trigger("update");这一句能解决问题
其他的不知道是什么东东。
所需文件下载地址：http://xiazai.jb51.net/201405/yuanma/jquery.tablesorter.zip
style.css及图片在themes\blue路径下。
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.tablesorter.js"><!-- 引入以下样式则表头出现排序图标，同时引入图片 -->
<link href="css/style.css" rel="stylesheet" type="text/css" >
效果如图：
二、标准的HTML表格，必须包括thead和tbody标签
复制代码 代码如下:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhangsan</td>
<td>boy</td>
<td>beijing</td>
</tr>
<tr>
<td>lisi</td>
<td>girl</td>
<td>shanghai</td>
</tr>
<tr>
...略
</tr>
</tbody>
</table>
三、设置table可排序
复制代码 代码如下:
$(document).ready(function(){
//第一列不进行排序(索引从0开始)
$.tablesorter.defaults.headers = {0: {sorter: false}};
$(".tablesorter").tablesorter();
});
官方文档：http://tablesorter.com/docs/
补充说明：
在使用过程遇到的一个问题，我的表格数据是通过ajax获取的，首页进行排序的时候没问题
当进行下一页排序的时候，会把上页的数据也重新显示出来，解决这个问题可以在你ajax获取数据之后
触发"update"事件，代码如下：
复制代码 代码如下:
$(".tablesorter").trigger("update");
以上问题着实头疼了很久，刚开始用的官网上的Pager plugin，发现这个不太合适。
又网上查资料 整理以下代码：
复制代码 代码如下:
$(".tablesorter tbody tr").addClass("delete");
$(".tablesorter tbody tr.delete").remove();
$("table tbody").append(html);
$(".tablesorter").trigger("appendCache");
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("sorton",[[[2,1],[0,0]]]);
于是都用上了，久经测试 发现只有$(".tablesorter").trigger("update");这一句能解决问题
其他的不知道是什么东东。
所需文件下载地址：http://xiazai.jb51.net/201405/yuanma/jquery.tablesorter.zip
style.css及图片在themes\blue路径下。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2025年01月20日
2025年01月20日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果（九）》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]