前端实现翻页---jqPaginator.js

最新推荐文章于 2024-07-31 17:07:58 发布

原创最新推荐文章于 2024-07-31 17:07:58 发布 · 764 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端翻页jqPaginator.js #前端翻页 #jqPaginator.js

JavaScript基础知识点同时被 2 个专栏收录

20 篇文章

订阅专栏

JQuery常见问题

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jqPaginator.js库实现动态分页的方法，详细展示了如何在获取到后台数据后更新页面显示，包括设置总条数、当前页数及页面大小等参数。

后台每次返回10调数据

HTML：

JS：

在请求成功，返回数据的success里最下面调用翻页

if(_s == 0){
fnPage(dt.all_article_num,1);
}

/*
* 分页
* tcount--总条数
* page--当前页
*/
var _s = 0;
function fnPage(tcount,page){
tcount = parseInt(tcount);
$('.totalpage').html(tcount);
if(!tcount) {
$('.iplist').html('');
$('.pagination').html('');
return;
}
$('.pagination').jqPaginator({
totalCounts: tcount,
pageSize:10,
visiblePages:1,
currentPage: parseInt(page),
first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}/ {{totalPages}}<\/a><\/li>', //<li class="page"><a href="javascript:void(0);"> {{page}} / {{totalPages}} <\/a><\/li>
onPageChange: function (num) {
_s++;
if(_s>1){
queryData(num);
}
}
});
}