Layui + ssm 分页

男娘i 2022-12-08 05:29 164阅读 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);
    	}

代码没有很复杂，总之一定要传入两个值，多少条数据和第几页，layui的分页挺好用的。