Koa2 分页插件 jqPaginator_koa结合jquery分页插件实现数据分页
一、数据库分页查询数据的原理算法
规则:规定每页20条数据的查询方式
查询第一页(page=1):
db.表名.find().skip(0).limit(20)
查询第二页(page=2):
db.表名.find().skip(20).limit(20)
查询第三页(page=3):
db.表名.find().skip(40).limit(20)
规则:规定每页8条数据的查询方式
查询第一页(page=1):
db.表名.find().skip(0).limit(8)
查询第二页(page=2):
db.表名.find().skip(8).limit(8)
查询第三页(page=3):
db.表名.find().skip(16).limit(8)
查询第四页(page=4):
db.表名.find().skip(24).limit(8)
总结:分页查询的sql语句
db.表名.find().skip((page-1)*pageSize).limit(pageSize)
二、数据库分页方法封装
find方法封装
db.collection(collectionName).find(json1,{fields:attr}).skip(slipNum).limit(pageSize);
count方法封装
var result= db.collection(collectionName).count(json);
result.then(function(data){
resolve(data);
})
三、Koa2 结合jqPaginator实现分页
对应路由:
router.get('/',async (ctx)=>{
var page=ctx.query.page ||1;
var pageSize=5;
//查询总数量
var count= await DB.count('article',{});
var result=await DB.find('article',{},{},{
page:page,
pageSize:pageSize
});
await ctx.render('admin/article/index',{
list: result,
page:page,
totalPages:Math.ceil(count/pageSize)
});
})
对应模板中:
定义一个div 注意 class为bootstrap的分页calss
然后复制下面代码
$('#page').jqPaginator({
totalPages: {{totalPages}},
visiblePages: 8,
currentPage: {{page}},
onPageChange: function (num, type) {
console.log(num, type);
//
if(type=='change'){
location.href="{{__HOST__}}/admin/article?page="+num;
}
}
});