基于jqGrid实现列表分页效果(后台处理以及pageBean)
2017-11-06 09:54
1296 查看
基于jqGrid实现列表分页效果(后台处理)
目录
[TOC]
分页实现布局:
前端使用jqGrid配置实现分页展示
后台创建分页javaBean
后台handler实现分页
前端使用jqGrid配置实现分页展示
jqGrid实现列表的展示功能,通过配置实现分页查询, —— [ jqGrid参考资料 ]代码块
jsonReader: { /* rows: 后台返回数据list集合 currPage: 当前页 totalpages: 总页数 totalCount: 总记录数 */ root:"rows", page:"currPage", total:"totalpages", // 很重要 定义了 后台分页参数的名字。 records:"totalCount", repeatitems:false, id : "id" }
后台创建分页pageBean
代码块
package com.kingdee.eas.custom.database.certificate; public class CertificateQueryPage { private int curPage =1; //当前页 private int totalPage; // 总页数 private int totalCount; // 总行数 private int pageSize=20; // 每页行数 public CertificateQueryPage(int rows, Integer curPage,Integer pageSize){ this.totalCount = rows; this.curPage = curPage; this.pageSize=pageSize; if(this.totalCount % this.pageSize ==0){ this.totalPage = this.totalCount/this.pageSize; }else if (rows < this.pageSize){ this.totalPage =1; }else{ this.totalPage = this.totalCount/this.pageSize +1; } } 4000 public CertificateQueryPage(int rows) { this.totalCount=rows; if(this.totalCount % this.pageSize ==0){ this.totalPage =this.totalCount/this.pageSize; }else if(rows < this.pageSize){ this.totalPage=1; }else { this.totalPage =this.totalCount/this.pageSize +1; } } public int getCurPage() { return curPage; } public void setCurPage(int curPage) { this.curPage = curPage; } public int getTotalPage() { return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } }
后台handler实现分页
代码块
// 分頁 String page = request.getParameter("page"); String pageSizeR = request.getParameter("rows"); CertificateQueryPage queryPage =null; if(!StringUtils.isEmpty(page) || !StringUtils.isEmpty(pageSizeR)){ queryPage = new CertificateQueryPage(dataList.size(),Integer.valueOf(page),Integer.valueOf(pageSizeR)); }else{ queryPage = new CertificateQueryPage(dataList.size()); } //CertificateQueryPage int pageSize = queryPage.getPageSize(); int curPage = queryPage.getCurPage(); int fromIndex =(curPage -1)*pageSize;//开始索引 int toIndex = curPage*pageSize;// 结束索引 if(toIndex> queryPage.getTotalCount()){// 如果结束索引大于list的size,则结束索引等于lise的size toIndex =queryPage.getTotalCount(); } if(fromIndex > toIndex){// 如果开始索引大于结束索引,则 fromIndex=0; } // dataList为数据总量,这里通过subList函数返回分页结果数据 // gridDataMap 为后台返回前端的Map gridDataMap = new LinkedHashMap()数据集;这里使用LinkedHashMap的目的,保证数据排序前后端不混乱 List list = dataList.subList(fromIndex, toIndex); gridDataMap.put("rows", list); gridDataMap.put("currPage", curPage); gridDataMap.put("totalpages", queryPage.getTotalPage()); gridDataMap.put("totalCount", queryPage.getTotalCount());
相关文章推荐
- 基于jquery.page.js实现分页效果
- PageBean方式实现分页效果 &n…
- PageBean方式实现分页效果 泽0715
- 可拖动拉伸的左右分栏效果,本例子是用Table以及JS来实现的,左右分栏可改变,拖动中间的边框就可实现宽度的调整,点击时可设置为隐藏左侧列表。
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- pageBean实现分页
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- 基于spring boot的mysql使用pagehelper实现分页功能
- 基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
- jQuery实现仿腾讯视频列表分页效果的方法
- JSP+Servlet技术实现分页 首页 下一页 每一页显示10条页码 下一页 尾页 第页/共页 (利用PageBean实现)
- onethink使用article:list显示后台文章标题和article:page 实现分页
- 基于easyui datagrid后台分页实现
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- [置顶] MyBatis基于Spring-boot集成通用Mapper以及pagehelper分页插件(含源码下载)
- 0012、node 之简单筛选后台数据以及需要分页时的一种处理方式
- 基于Qt的类似QQ好友列表抽屉效果的实现
- 【VS开发】【图像处理】基于灰度世界、完美反射、动态阈值等图像自动白平衡算法的原理、实现及效果
- 利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
- extjs实现分页后台处理很快捷的一种做法