Egg 中结合JqPagination实现数据分页

1. 在模板文件中引入分页插件及其依赖；

<!-- 引入插件和插件的依赖-->
<link rel="stylesheet" href="/public/admin/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="/public/admin/bootstrap/js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="/public/admin/bootstrap/js/bootstrap.min.js"></script>
<script src="/public/admin/jqPaginator/jqPaginator.js"></script>

2. 在模板文件中指定分页的容器；

<!-- 指定分页的容器,依赖于BootStrap的样式pagination -->
<!-- https://v3.bootcss.com/components/#pagination -->
<div id="pagination" class="pagination" style="margin:0;"></div>

3. 在模板文件中调用分页插件；

// 调用分页插件，使用EJS模板渲染总页数与当前页
$('#pagination').jqPaginator({
    totalPages: <%= totalPages %>,
    visiblePages: 10,
    currentPage: <%=page %>,
    onPageChange: function (num, type) {
        // 区分初始化加载与点击加载
        if (type == 'change') {
            location.href = "/admin/goods?page=" + num;
        }
    }
});

4. 定义路由；

// router.js
'use strict';
module.exports = app => {
    const { router, controller } = app;
    // 商品管理
    router.get('/admin/goods',controller.admin.goods.index);
};

5. 定义控制器；

// app/controller/admin/goods.js

'use strict';
const Controller = require('egg').Controller;

class GoodsController  extends Controller {
    // 商品列表
    async index() {
        let page = this.ctx.query.page || 1;
        let pagesize = 10;
        // 查询Goods表中的总数量
        let totalNum = await this.ctx.model.Goods.find({}).count();
        // 按分页查询Goods表中的数据
        let goodsResult = await this.ctx.model.Goods.find({}).skip((page - 1) * pagesize).limit(pagesize);

        await this.ctx.render('admin/goods/index', {
            list: goodsResult,
            page: page,
            totalPages: Math.ceil(totalNum / pagesize),
        });
    }
}
module.exports = GoodsController;