页码提供数量选择

app/base/base_service.js

@@ -170,8 +170,8 @@ class BaseService extends Service {
         }
 
         // 分页相关
-        this.sqlBuilder.limit = this.app.config.pageSize;
-        this.sqlBuilder.offset = this.app.config.pageSize * (this.ctx.page - 1);
+        this.sqlBuilder.limit = this.ctx.pageSize ? this.ctx.pageSize : this.app.config.pageSize;
+        this.sqlBuilder.offset = this.sqlBuilder.limit * (this.ctx.page - 1);
 
         // 数据筛选
         if (this.ctx.sort !== undefined && this.ctx.sort.length > 0) {

app/controller/setting_controller.js

@@ -98,6 +98,7 @@ module.exports = app => {
                 }
 
                 const page = ctx.page;
+                const pageSize = ctx.pageSize;
 
                 // 过滤数据
                 ctx.service.projectAccount.searchFilter(ctx.request.query, projectId);
@@ -127,7 +128,10 @@ module.exports = app => {
                 // 分页相关
                 const pageInfo = {
                     page,
-                    total: Math.ceil(total / app.config.pageSize),
+                    pageSizeSelect: 1,
+                    pageSize,
+                    total_num: total,
+                    total: Math.ceil(total / pageSize),
                     queryData: JSON.stringify(ctx.urlInfo.query),
                 };
 
@@ -198,6 +202,7 @@ module.exports = app => {
                 // const rule = ctx.service.projectAccount.rule('updateUser');
                 // const frontRule = ctx.helper.validateConvert(rule);
                 const page = ctx.page;
+                const pageSize = ctx.pageSize;
                 ctx.sort = ['id', 'desc'];
                 const total = await ctx.service.projectAccount.count({ project_id: projectId });
                 // 获取项目用户列表
@@ -213,7 +218,10 @@ module.exports = app => {
                 // 分页相关
                 const pageInfo = {
                     page,
-                    total: Math.ceil(total / app.config.pageSize),
+                    pageSizeSelect: 1,
+                    pageSize,
+                    total_num: total,
+                    total: Math.ceil(total / pageSize),
                     queryData: JSON.stringify(ctx.urlInfo.query),
                 };
 

app/middleware/sort_filter.js

@@ -20,6 +20,10 @@ module.exports = options => {
         page = parseInt(page);
         page = isNaN(page) || page <= 0 ? 1 : page;
         this.page = page;
+        let pageSize = this.request.query.pageSize;
+        pageSize = parseInt(pageSize);
+        pageSize = isNaN(pageSize) || pageSize <= 0 ? this.app.config.pageSize : pageSize;
+        this.pageSize = pageSize;
         yield next;
     };
 };

app/view/layout/page.ejs

@@ -5,7 +5,8 @@
     }
 </style>
 <nav aria-label="Page navigation example">
-    <ul class="pagination pagination-sm"></ul>
+    <ul class="pagination pagination-sm">
+    </ul>
 </nav>
 <script type="text/javascript" src="/public/js/bootstrap/bootstrap-paginator.js"></script>
 <script type="text/javascript">
@@ -98,9 +99,46 @@
             return  queryString === '' ? '?' + firstQuery : '?' + firstQuery + '&' + queryString;
         }
     };
-    if (options.totalPages > 1) {
+    const pageSizeSelect = <%- pageInfo.pageSizeSelect ? parseInt(pageInfo.pageSizeSelect) : 0 %>;
+    if (options.totalPages > 1 || pageSizeSelect) {
         $(".pagination").bootstrapPaginator(options);
+        setSelectPageSize(pageSizeSelect);
     } else {
         $(".pagination").hide();
     }
+
+    function setSelectPageSize(psSelect) {
+        if (psSelect === 1) {
+            let queryData = JSON.parse('<%- pageInfo.queryData %>');
+            // 有其它数据则重新赋值page，然后组合字符串
+            delete queryData.page;
+            delete queryData.pageSize;
+            let queryArray = [];
+            for(let tmp in queryData) {
+                let tempString = tmp + '=' + queryData[tmp];
+                queryArray.push(tempString);
+            }
+            let firstQuery = queryArray.shift();
+            let queryString = queryArray.join('&');
+            queryString = firstQuery ? (queryString === '' ? '?' + firstQuery : '?' + firstQuery + '&' + queryString) : '';
+
+            const pshtml = '<li class="page-item disabled">\n' +
+                '            <span class="page-link" >共' + <%- pageInfo.total_num %> + '条</span>\n' +
+                '            </li>\n' +
+                '            <li class="page-item">\n' +
+                '            <span class="page-link" >\n' +
+                '            <div class="btn-group">\n' +
+                '            <a type="button" class="text-primary dropdown-toggle" data-toggle="dropdown" id="zhankai" >每页' + <%- pageInfo.pageSize %> + '条</a>\n' +
+                '            <div class="dropdown-menu" id="zhankaiSelect" aria-labelledby="zhankai" style="">\n' +
+                '            <a class="dropdown-item" href="'+ (queryString === '' ? '?pageSize=15' : queryString + '&pageSize=15') +'">每页15条</a>\n' +
+                '            <a class="dropdown-item" href="'+ (queryString === '' ? '?pageSize=30' : queryString + '&pageSize=30') +'">每页30条</a>\n' +
+                '            <a class="dropdown-item" href="'+ (queryString === '' ? '?pageSize=50' : queryString + '&pageSize=50') +'">每页50条</a>\n' +
+                '            <a class="dropdown-item" href="'+ (queryString === '' ? '?pageSize=100' : queryString + '&pageSize=100') +'">每页100条</a>\n' +
+                '            </div>\n' +
+                '            </div>\n' +
+                '            </span>\n' +
+                '            </li>';
+            $('.pagination').prepend(pshtml);
+        }
+    }
 </script>