Layui + ssm 分页-蒲公英云

Layui + ssm 分页

男娘i 2022-12-08 05:29 364阅读 0赞

做后台就会涉及到表格数据，当数据多的时候，就要使用分页来显示，这样就显得比较美观。分页确实有效，但它一定会加大系统的复杂度，如果数据量少的话可以不用分页，但是对于企业信息系统来说数据量不会限制在一个小范围内，所以分页还是很有必要的

分页的两个重要参数，一个是一页多少条数据，还有一个就是第几页，从而数据库计算得出显示哪些数据。

那么layui下的分页又有哪些不同呢

Js部分代码

table.render({
    elem: '#demo'
    ,title:'用户信息'  
    ,url: '${ctx}/dedicate/list.do' //数据接口    
    //,contentType: 'application/json'
    ,toolbar: '#toolbarDemo' 
    ,id:'relTable'
    ,totalRow:false //合计行
    ,page: true //开启分页
       ,cols: [[ //表头 
      //{field: 'numbers', title: '序号', width:80,type:'numbers', fixed: 'left'}
      {type:'checkbox',fixed:'left'}
      //,{field: 'isCheck', width:80,fixed:'left',templet:setState ,title: '审核否'}  
      ,{field: 'dedicateLineId',fixed:'left', width:80,hide:true, title: '专线id'}
      ,{field: 'dedicateLineName',fixed:'left',width:100, title: '专线名称'}
      ,{field: 'dedicateLineAddress', width:100, title: '专线地址'}
      ,{field: 'businessLicense', width:100, title: '营业执照'}
      ,{field: 'areaId', width:80, title: '地区id'} 
      ,{field: 'address', width:170, title: '地址'}
      ,{field: 'registraionTime', width:170
      ,title: '注册时间'}
      ,{field: 'describe', width:120, title: '描述'}
      ,{field: 'businessLincenseNumber', width:170, title: '营业执照编号'}
      ,{field: 'businessLicensePrinted', width:170, title: '营业执照复印件'}
      ,{field: 'legalPerson', width:90, title: '法人名称'}
      ,{field: 'legalIdCardPrinted',width:170, title: '法人身份证复印件'}
      ,{field: 'contactPerson', width:80, title: '联系人'}
      ,{field: 'contactNumber', width:170, title: '手机号'}         
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}     
    ]]       
    ,request:{
        pageName:'pageNo',//页码的参数名，默认：page
        limitName:'pageSize'//每页数据量的参数名，默认：limit
    }  
    ,limit:10 //每页显示的行数
    ,limits:[10,20,30]//每页条数选择项  
  });

其中pageNo就是第几页，pageSize就是每页显示数据的行数

Mapper

<select id="selectDedivateline" resultMap="BaseResultMap">
      SELECT * FROM bm_dedicate_line
      <where>
          <if test='dedicateLineName !=null and dedicateLineName !=""'>
              and dedicate_line_name like CONCAT(CONCAT('%',#{dedicateLineName,jdbcType=VARCHAR},'%'))
          </if>
      </where>     
      limit #{start,jdbcType=INTEGER},#{end,jdbcType=INTEGER}
  </select>

Impl

@Override
    public List<BmDedicateLine> selectDedivateline(Map map,String dedicateLineName) {
        // TODO Auto-generated method stub
        int pageNo=map.get("pageNo")==null?1:Integer.valueOf(map.get("pageNo")+"");
        int pageSize=map.get("pageSize")==null?10:Integer.valueOf(map.get("pageSize")+"");
        map.put("start", (pageNo-1)*pageSize);
        map.put("end", pageSize);
        map.put("dedicateLineName", dedicateLineName);
        return dedicateLineDao.selectDedivateline(map);
    }

控制器

@ResponseBody
    @RequestMapping(value="/list",produces="application/json;charset=UTF-8")
    public ResultMap<List<BmDedicateLine>> list(@RequestParam Map map,String dedicateLineName) {
        List<BmDedicateLine> emp=iDedicateLineService.selectDedivateline(map,dedicateLineName);
        int totalCount=iDedicateLineService.getTotalRow(map);
          return new ResultMap<List<BmDedicateLine>>(0,"",totalCount,emp);
    }