bootstrap+ssm框架分页问题

这个分页实用比较简单。

在搭好的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去截取对应的数据，实现分页。