编写一个使用bootstrap框架的页面（bootstrapssm框架分页问题）

编写一个使用bootstrap框架的页面（bootstrapssm框架分页问题）@RequestMapping(value = "/queryDataByPage") @ResponseBody public FeedBackObject queryDataByPage(DTrack dSite HttpServletRequest request int pageNumber int pageSize) { // 处理数据，构建Map Map<String Object> mapForService = new HashMap<String Object>(); try { mapForService = BeanUtil.beanToMap(dSite); } catch (Exception e) { e.printStackTrace(); throw new BusinessException("Bean转换M

这个分页实用比较简单。

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

pagehelper.xml：

<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <settings> <setting name="logImpl" value="SLF4J"/> </settings> <plugins> <!-- com.github.pagehelper为PageHelper类所在包名 --> <plugin interceptor="com.github.pagehelper.PageHelper"> <!-- 4.0.0以后版本可以不设置该参数 --> <property name="dialect" value="mysql"/> <!-- 该参数默认为false --> <!-- 设置为true时，会将RowBounds第一个参数offset当成pageNum页码使用 --> <!-- 和startPage中的pageNum效果一样--> <property name="offsetAsPageNum" value="true"/> <!-- 该参数默认为false --> <!-- 设置为true时，使用RowBounds分页会进行count查询 --> <property name="rowBoundsWithCount" value="true"/> <!-- 设置为true时，如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 --> <!-- （相当于没有执行分页查询，但是返回结果仍然是Page类型）--> <property name="pageSizeZero" value="true"/> <!-- 3.3.0版本可用 - 分页参数合理化，默认false禁用 --> <!-- 启用合理化时，如果pageNum<1会查询第一页，如果pageNum>pages会查询最后一页 --> <!-- 禁用合理化时，如果pageNum<1或pageNum>pages会返回空数据 --> <property name="reasonable" value="true"/> <!-- 3.5.0版本可用 - 为了支持startPage(Object params)方法 --> <!-- 增加了一个`params`参数来配置参数映射，用于从Map或Servletrequest中取值 --> <!-- 可以配置pageNum pageSize count pageSizeZero reasonable orderBy 不配置映射的用默认值 --> <!-- 不理解该含义的前提下，不要随便复制该配置 --> <!-- <property name="params" value="pageNum=start;pageSize=limit;"/> --> <!-- 支持通过Mapper接口参数来传递分页参数 --> <property name="supportMethodsArguments" value="true"/> <!-- always总是返回PageInfo类型 check检查返回类型是否为PageInfo none返回Page --> <property name="returnPageInfo" value="check"/> </plugin> </plugins> </configuration>

前端框架实用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<String Object> mapForService = new HashMap<String Object>(); 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<String Object> map = new HashMap<String Object>(); // 数据权限过滤（根据登陆用户过滤） UserLoginInfo loginInfo = (UserLoginInfo) request.getSession().getAttribute("user"); if (loginInfo == null) { throw new BusinessException(PromptMessageComm.LOGIN_FAILED); } if(StringUtils.isEmpty(dSite.getProjectBatch())){ //无批次选择时查询所有批次触发所有需要 List<YearDraftPlanImportModel> list = iYearPlanService.getBatch(); List<String> strBatchIdList = new ArrayList<>(); for (YearDraftPlanImportModel yearDraftPlanImportModel : list) { strBatchIdList.add(yearDraftPlanImportModel.getBatch_id()); } mapForService.put("allBatchsList" strBatchIdList); } //添加索引所需要条件为空时查询所有地市 if(StringUtils.isEmpty(dSite.getRegion())){ List<SysRegionVO> regionList = regionService.getCitys(dSite.getProvince()); List<String> 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<String> taskStrList = Arrays.asList(array); mapForService.put("taskStatusList" taskStrList); } if(dSite.getOrderStatus() == null){ String strStatus = "200 240 250"; String[] array = strStatus.split(" "); List<String> 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) && StringUtils.isNotBlank(inputV)) { mapForService.put("mobileOrderCode" inputV); } if("towerOrderId".equals(inputN) && StringUtils.isNotBlank(inputV)) { mapForService.put("towerOrderCode" inputV); } // if("siteAddressName".equals(inputN) && StringUtils.isNotBlank(inputV)) { // mapForService.put("siteAddressName" inputV); // } if("towerSiteAddress".equals(inputN) && StringUtils.isNotBlank(inputV)) { mapForService.put("towerSiteAddress" inputV); } PageInfo<DTrack> 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<DTrack> queryForPage(int pageNumber int pageSize Map<String Object> map) { PageHelper.startPage(pageNumber pageSize); List<DTrack> list = dTrackService.queryDtrackList(map); return new PageInfo<DTrack>(list); }

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