欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery分页插件

程序员文章站 2022-06-21 11:06:18
分享一款未解决前后端分离ajax数据渲染分页问题自己写的一款插件。 使用方法: 页面上需要展示分页标签的地方添加:
页面加载时执行:CRPage.init(getItem, pagesize); //getItem为获取数据并渲染的函数 而后第一次 ......

  分享一款未解决前后端分离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);

 

效果图:

  jquery分页插件

 jquery分页插件

 

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