Koa2 分页插件 jqPaginator_koa结合jquery分页插件实现数据分页

Koajs入门视频教程在线学习地址：https://www.bilibili.com/video/BV1xm4y1c7zr/?p=1

Koajs入门视频教程网盘下载地址：https://pan.baidu.com/s/1QN_XkXRXmIw6V7HevntBQQ 提取码：abcd

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 

    

     <div id="page" class="pagination"></div>

    然后复制下面代码

 <script src="{{__HOST__}}/admin/jqPaginator.js"></script>


	<script>
		$('#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;
				}
			}
		});

	</script>