自己添加的tablesorter分页跳转功能
时间: 2023-08-02 09:06:25 浏览: 67
可以使用tablesorter插件自带的分页跳转功能,也可以自己添加分页跳转功能。
使用tablesorter插件自带的分页跳转功能,需要在初始化tablesorter时设置"pager"选项,例如:
```javascript
$(function() {
$("#myTable").tablesorter({
// 设置分页插件
pager: {
// 分页大小
size: 10,
// 跳转按钮
display: true,
// 输出区域
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
}
});
});
```
自己添加分页跳转功能,则需要在页面中添加分页跳转的HTML,并在JavaScript中添加跳转事件,例如:
```html
<div id="pager">
<ul>
<li class="first"><a href="#">首页</a></li>
<li class="prev"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
<li class="last"><a href="#">尾页</a></li>
<li class="goto"><input type="text" size="1" /> <a href="#">跳转</a></li>
</ul>
</div>
```
```javascript
$(function() {
// 初始化tablesorter
$("#myTable").tablesorter({
// 设置分页插件
pager: {
// 分页大小
size: 10,
// 跳转按钮
display: false
}
});
// 绑定分页跳转事件
$("#pager .first").click(function() {
$("#myTable").trigger("pageSet", 0);
return false;
});
$("#pager .prev").click(function() {
$("#myTable").trigger("pageMove", -1);
return false;
});
$("#pager .next").click(function() {
$("#myTable").trigger("pageMove", 1);
return false;
});
$("#pager .last").click(function() {
$("#myTable").trigger("pageSet", $("#myTable").triggerHandler("totalPages") - 1);
return false;
});
$("#pager .goto a").click(function() {
var page = parseInt($("#pager .goto input").val(), 10) - 1;
if (page >= 0 && page < $("#myTable").triggerHandler("totalPages")) {
$("#myTable").trigger("pageSet", page);
}
return false;
});
});
```
其中,`pageSet`事件用于跳转到指定页,`pageMove`事件用于向前或向后翻页,`totalPages`方法用于获取总页数。