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;