当前位置： 移动技术网 > IT编程>开发语言>Jquery > jquery分页插件

jquery分页插件

2019年02月06日  | 移动技术网IT编程  | 我要评论

　　分享一款未解决前后端分离ajax数据渲染分页问题自己写的一款插件。

　　使用方法：

　　页面上需要展示分页标签的地方添加：<div class="crpage"></div>

　　页面加载时执行：crpage.init(getitem, pagesize);     //getitem为获取数据并渲染的函数

　　而后第一次执行getitem函数时执行：crpage.savecount(count);

　　源码地址：

　　　　

　　　　https://gitee.com/yizhixiaoyuancr/pagehelper.git

　　　　内附：jquery和angular.js使用范例

　　　　

　　演示地址：

 

　　　　

 

　　　　例：

crpage.init(function(p1, p2) {
/* p1为起始序号，p2为一页显示数量 */
var pagenum = p1 / p2 + 1; //pagenum传值根据后端接收参数而定
var data = { pagenum: pagenum, pagesize: p2 };
$.get('http://125.64.9.228:8080/demo/test/get',
data,
function(data) {
console.log(data);
if (p1 == 0) { //在查第一页时保存获取下来的总数，也可以单独一个统计总数的接口执行crpage.savecount(count);
var count = data.count;
crpage.savecount(count);
}
$('table tbody').empty();
if (data.result.content) {
data.result.content.foreach(r => {
var tr = temp.replace('[id]', r.id).replace('[name]', r.name).replace('[age]', r.age)
.replace('[city]', r.city).replace('[school]', r.school);
$('table tbody').append(tr);
})
}
},
'json');
}, 20);

 

效果图：

　　

 

 

请觉得还不错的小伙伴点个关注吧，以后会继续推出更多好用的插件，谢谢您的支持！

 

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网