前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Egg 中结合JqPagination实现数据分页

Egg 中结合JqPagination实现数据分页

作者头像
越陌度阡
发布2020-11-26 11:33:29
8680
发布2020-11-26 11:33:29
举报

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

代码语言:javascript
复制
<!-- 引入插件和插件的依赖-->
<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. 在模板文件中指定分页的容器。

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

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

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

4. 定义路由。

代码语言:javascript
复制
// router.js
'use strict';
module.exports = app => {
    const { router, controller } = app;
    // 商品管理
    router.get('/admin/goods',controller.admin.goods.index);
};

5. 定义控制器。

代码语言:javascript
复制
// 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;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/04/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档