bootstrap+ssm框架分页问题

作者 : 开心源码 本文共6126个字,预计阅读时间需要16分钟 发布时间: 2022-05-11 共72人阅读

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

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

pagehelper.xml:

                                       <!-- 启使用正当化时,假如pageNumpages会查询最后一页 -->  <!-- 禁使用正当化时,假如pageNumpages会返回空数据 -->            <!--  -->              

前台框架实使用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") &amp;&amp; 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 &amp;&amp; new Date(value).format("yyyy-MM-dd hh:mm:ss"); }, width: '170' }, { field: 'demandCarryonTime', title: '需求承接时间', formatter : function(value){ return value &amp;&amp; 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框架分页问题

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » bootstrap+ssm框架分页问题

发表回复