jquery分页插件

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

  使用方法:

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

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

  而后第一次执行getItem函数时执行:CRPage.savecount(count);

  源码地址:

    https://github.com/chenrong446/pagehelper.git

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

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

    

  演示地址:

 

    http://rg.page.com/demo/crpage/demo_jq

 

    例:

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);

 

效果图:

  

 

 

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

 

 

 

posted @ 2019-01-30 13:47 一只小猿 阅读(...) 评论(...) 编辑 收藏