jquery.pagination.js分页插件的使用
程序员文章站
2022-06-18 17:37:59
1、引用jquery.pagination.js 2、发送2次ajax请求,第一次需传入首页和页大小,返回数据得到所有数据的长度; ......
1、引用jquery.pagination.js
<script src="${ctx}/themes/b2b2cv2/doctor/js/message/jquery.pagination.js"></script>
2、发送2次ajax请求,第一次需传入首页和页大小,返回数据得到所有数据的长度;
第二次发送请求传入点击的页码号和页的大小,返回数据得到点击页的数据
参考链接:
1、https://blog.csdn.net/baidu_25343343/article/details/70478467
2、https://blog.csdn.net/Fanbin168/article/details/49847931
代码如下:
var pageSize = 2; //声明页大小的变量
var dataCount, pageCount;
$.ajax({
url: url,
type: 'POST',
data: {
pageSize: pageSize, //第一次ajax请求需传的参数
pageNumber: 1
},
dataType: 'json',
cache: false,
success: function(datas) {
console.log(datas.data.list);
if(datas.result == 1) {
var html = template('tpl', {
list: datas.data.list,
});
$(className).html(html);
}
dataCount = datas.data.count; //返回的数据获得数据库中所有数据的数量,
pageCount = Math.ceil(dataCount / pageSize);//算出总页数
$('.M-box').pagination({
pageCount: pageCount, //总页数
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '<< 上一页',
nextContent: '下一页 >>',
callback: function(api) {
console.log(api.getCurrent())
var currentPage = api.getCurrent(); //获取当前点击的页码
$.ajax({
url: url,
type: 'POST',
data: {
pageSize: pageSize, //第二次请求需传入的参数(页码的长度及当前点击的页码)
pageNumber: currentPage
},
dataType: 'json',
cache: false,
success: function(datas) {
console.log(datas);
if(datas.result == 1) {
var html = template('tpl', {
list: datas.data.list
});
$(className).html(html);
}
},
error: function() {
alert("请求接口失败。")
}
})
}
});
},
error: function() {
alert("请求失败!!!")
}
})
推荐阅读
-
Laravel框架执行原生SQL语句及使用paginate分页的方法
-
vue轮播图插件vue-concise-slider的使用
-
jquery插件lazyload.js延迟加载图片的使用方法
-
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
-
yii框架使用分页的方法分析
-
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
-
腾讯电脑管家的清理插件功能使用介绍(问答式)
-
angular项目中bootstrap-datetimepicker时间插件的使用示例
-
jQuery ui插件的使用方法代码实例
-
使用 webpack 各种插件提升你的开发效率