bootstrap+ssm框架分页问题

  • 时间:2018-06-21 23:19 作者:程序员小新人学习 来源:程序员小新人学习 阅读:190
  • 扫一扫,手机访问
摘要:这个分页实使用比较简单。在搭好的ssm框架写一个配置文件pagehelper.xml,这个是mabatis的一个分页配置文件。pagehelper.xml: pages会查询最后一页 pages会返回空数据

这个分页实使用比较简单。

在搭好的ssm框架写一个配置文件pagehelper.xml,这个是mabatis的一个分页配置文件。

pagehelper.xml:

                                                                   

前台框架实使用bootstrap,一般实使用bootstraptable,进行数据显示-显示成表格形式。

function loadTableData() { // 先销毁表格 $('#tb').bootstrapTable('destroy'); // 初始化表格,动态从服务器加载数据 $("#tb").bootstrapTable({ method : "post", contentType : "application/x-www-form-urlencoded", url : "queryDataByPage", // 获取数据的地址 striped : true, // 表格显示条纹 pagination : true, // 启动分页 pageSize : ipageCount, // 每页显示的记录数 pageNumber : 1, // 当前第几页 minimumCountColumns: 1, //最少允许的列数 clickToSelect: true, //能否启使用点击选中行 pageList : [10, 25, 50, 100, 200, 500], // 记录数可选列表 search : false, // 能否启使用查询 sidePagination : "server", // 表示服务端请求 // 设置为undefined能获取pageNumber,pageSize,searchText,sortName,sortOrder // 设置为limit能获取limit, offset, search, sort, order queryParamsType : "undefined", rowStyle: function (row, index) {//为同步的行设置背景色 //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger']; if(row.hasOwnProperty("isSync") && row.isSync == '0'){ return style={css:{'color':'#FF0000'}}; } return ''; }, queryParams : function queryParams(params) { // 设置查询参数 var param = { province : $("#province option:selected").val(), region : $("#region option:selected").val(), county : $("#county option:selected").val(), priority : $("#priority option:selected").val(), status : $("#status option:selected").val(), taskStatus:$("#taskStatus option:selected").val(), //是待办还是已办(待办值是-1,已办是非-1) siteAddressType : $("#siteAddressType option:selected").val(), projectBatch : $("#projectBatch option:selected").val(), //项目批次 orderStatus:$("#orderStatus option:selected").val(), buildType: $("#buildType option:selected").val(), dealWithOpinion: $("#dealWithOpinion option:selected").val(), inputN:inputName, //获取移动测订单 or 铁塔测订单 or 站址名称 inputV:inputValue, //获取移动测订单 or 铁塔测订单 or 站址名称的值 pageNumber: params.pageNumber, pageSize: params.pageSize }; var key = $("#keywords"); param[key.attr("name")]=key.val(); return param; }, columns: [{ checkbox: true },{ field: 'demandProposeTime', title: '需求提出时间', formatter : function(value){ return value && new Date(value).format("yyyy-MM-dd hh:mm:ss"); }, width: '170' }, { field: 'demandCarryonTime', title: '需求承接时间', formatter : function(value){ return value && new Date(value).format("yyyy-MM-dd hh:mm:ss"); }, width: '170' } ], onLoadError : function() { // 加载失败时执行 console.log("请求失败!"); }, responseHandler: function(res) { thWidth($('#tb')); if(res != null){//报错反馈 if(res.success != "1"){ alertModel(res.msg); } showTableList = res.obj; failCount = res.obj.failCount; } return { "total": res.obj.total,//总页数 "rows": res.obj.data || [] //数据 }; } });}

有几个参数是要注意的:

pagination : true, // 启动分页pageSize : ipageCount, // 每页显示的记录数pageNumber : 1, // 当前第几页pageList : [10, 25, 50, 100, 200, 500], // 记录数可选列表

还有就是传到后端的参数,这两个参数就是后端获取到的第几页,跟每页显示的行数。前台我们点击了这两个值之后,前台框架会自动获取到这两个值,并且传到后端。

pageNumber: params.pageNumber, pageSize: params.pageSize

后端部分:

@RequestMapping(value = "/queryDataByPage") @ResponseBody public FeedBackObject queryDataByPage(DTrack dSite,HttpServletRequest request, int pageNumber, int pageSize) { // 解决数据,构建Map Map mapForService = new HashMap(); try { mapForService = BeanUtil.beanToMap(dSite); } catch (Exception e) { e.printStackTrace(); throw new BusinessException("Bean转换Map异常。"); } mapForService.put("processState", OrderStatus.ProcessState.SITE_SCREEN); FeedBackObject feedBackObject = new FeedBackObject(); Map map = new HashMap(); // 数据权限过滤(根据登陆使用户过滤) UserLoginInfo loginInfo = (UserLoginInfo) request.getSession().getAttribute("user"); if (loginInfo == null) { throw new BusinessException(PromptMessageComm.LOGIN_FAILED); } if(StringUtils.isEmpty(dSite.getProjectBatch())){ //无批次选择时查询所有批次触发所有需要 List list = iYearPlanService.getBatch(); List strBatchIdList = new ArrayList<>(); for (YearDraftPlanImportModel yearDraftPlanImportModel : list) { strBatchIdList.add(yearDraftPlanImportModel.getBatch_id()); } mapForService.put("allBatchsList", strBatchIdList); }  //增加索引所需要条件为空时查询所有地市 if(StringUtils.isEmpty(dSite.getRegion())){ List regionList = regionService.getCitys(dSite.getProvince()); List regionIdList = new ArrayList<>(); for (SysRegionVO sysRegionVO : regionList) { regionIdList.add(sysRegionVO.getRegId()); } mapForService.put("regionIdList", regionIdList); }  mapForService.put("regIds", loginInfo.getReg_ids()); if (!StringUtils.isEmpty(request.getParameter("projectBatch"))) { String[] arr = request.getParameter("projectBatch").split(","); mapForService.put("batchsList", Arrays.asList(arr)); } if (!StringUtils.isEmpty(request.getParameter("taskStatus"))) { String[] array = request.getParameter("taskStatus").split(","); mapForService.put("taskStatusList", Arrays.asList(array)); }else { String strStatus = "-1,8,0,9"; String[] array = strStatus.split(","); List taskStrList = Arrays.asList(array); mapForService.put("taskStatusList", taskStrList); }  if(dSite.getOrderStatus() == null){ String strStatus = "200,240,250"; String[] array = strStatus.split(","); List orderStatusList = Arrays.asList(array); mapForService.put("orderStatusList", orderStatusList); }  String inputN = request.getParameter("inputN"); // 获取动态框 ,移动测订单 or 铁塔测订单 or 站址名称 String inputV = request.getParameter("inputV"); // 获取动态框 ,移动测订单 or 铁塔测订单 or 站址名称 的值 if("mobileOrderId".equals(inputN) &amp;&amp; StringUtils.isNotBlank(inputV)) { mapForService.put("mobileOrderCode", inputV); } if("towerOrderId".equals(inputN) &amp;&amp; StringUtils.isNotBlank(inputV)) { mapForService.put("towerOrderCode", inputV); }// if("siteAddressName".equals(inputN) &amp;&amp; StringUtils.isNotBlank(inputV)) {// mapForService.put("siteAddressName", inputV);// } if("towerSiteAddress".equals(inputN) &amp;&amp; StringUtils.isNotBlank(inputV)) { mapForService.put("towerSiteAddress", inputV); } PageInfo page = dSiteScreenTrackService.queryForPage(pageNumber, pageSize, mapForService); map.put("data", page.getList());// 查询的列表数据 map.put("total", page.getTotal());// 数据总数 map.put("failCount", WsdlAddress.getFailMax());//失败次数限制 feedBackObject.Obj = map; feedBackObject.success = RESULT.SUCCESS_1; feedBackObject.msg = "列表查询成功"; return feedBackObject; }public PageInfo queryForPage(int pageNumber, int pageSize, Map map) { PageHelper.startPage(pageNumber, pageSize); List list = dTrackService.queryDtrackList(map); return new PageInfo(list);}

后端会先去把符合条件的数据一律查询出来,再把你传过来的pageSize和pageNumber使用PageHelper封装。把查询出来的所有结果集分装到PageInfo里面,PageInfo会使用pageSize和pageNumber去截取对应的数据,实现分页。

bootstrap+ssm框架分页问题

  • 全部评论(0)
最新发布的资讯信息
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
手机二维码手机访问领取大礼包
返回顶部