layui的分页怎么实现

如果你想了解更多关于layui的知识，可以点击：layui教程

这是是基于自己搭建的SSM案例框架来实现

效果图如下

分页jsp和js内容模块，暂时写在了一块，当然也可以提出来写个js文件

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>   <ｓｃｒｉｐｔ type="text/javascript" src="<%=basePath %>js/layui/layui.all.js"> <ｓｃｒｉｐｔ type="text/javascript" src="<%=basePath %>js/layui/layui.js"> <ｓｃｒｉｐｔ type="text/javascript" src="<%=basePath %>js/jquery-3.3.1.min.js">  
 
 value" id="selectValue" lay-verify="required" placeholder="客户姓名，电话" autocomplete="off" class="layui-input lj-v8rt"> 
 搜索 
  <ｓｃｒｉｐｔ type="text/html" id="barDemo"> 查看 编辑 删除 <ｓｃｒｉｐｔ>layui.use('table', function(){ var table = layui.table; var ids =new Array(); var curPath=window.document.location.href; var localhostPaht=curPath.substring(0,32); var selectValue=document.getElementById("selectValue").value; console.log(selectValue); table.render({ elem: '#test' // ,url:localhostPaht+'userlist.do?page='+page+'&limit='+limit+'&selectValue='+selectValue ,url:localhostPaht+'userlist.do' //分页插件 ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 ,groups: 1 //只显示 1 个连续页码 ,first: false //不显示首页 ,last: false //不显示尾页 } //显示字段参数 ,cols: [[ {field:'uid', width:'5%', title: 'ID', sort: true} ,{field:'uname', width:'10%', title: '用户名'} ,{field:'sex', width:'8%', title: '性别'} ,{field:'national', width:'8%', title: '民族', sort: true} ,{field:'age', width:'8%', title: '年龄'} ,{field:'constellation', title: '星座', width:'10%'} ,{field:'unative', width:'10%', title: '籍贯', sort: true} ,{field:'labeltext', title: '描述', width:'20%'} ,{fixed: 'right', width:'20%', title: '基本操作',align:'center', toolbar: '#barDemo'} ]] });});

后台实现

主要的地方就是page<当前页，比如1页>、limit<当前显示数据，比如10条数据>、count<当前表总数据条数>，其他的事情有layui分页插件来做(jsp页面有该代码)，只要page、limit、count这三个值，分页就能实现

//分页插件 ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 ,groups: 1 //只显示 1 个连续页码 ,first: false //不显示首页 ,last: false //不显示尾页 }

返回object类型，js会将这个类型当做json数据

@SuppressWarnings("null")@RequestMapping(value = "userlist")@ResponseBodypublic Object userlist(HttpservletRequest request, HttpServletResponse response) {//分页String pageNo=request.getParameter("page");String pagesize=request.getParameter("limit");String uname=request.getParameter("selectValue");HashMap map=new HashMap();map.put("pageNo", (Integer.valueOf(pageNo)-1));map.put("pagesize", pagesize);//查询总数量List listsize = user.findAll();//分页传参page<当前页>和limit<显示数据条数>List list=null;try {list = user.selectAlllist((Integer.parseInt(pageNo)-1)*Integer.parseInt(pagesize),Integer.parseInt(pagesize));} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}System.out.println("条数："+list.size());Map result = new HashMap();int count = listsize.size(); JSONArray json = JSONArray.fromObject(list); String js=json.toString(); //*****转为layui需要的json格式，必须要这一步，博主也是没写这一步，在页面上数据就是数据接口异常 String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}"; System.out.println(jso); return jso; }

对应的sql

ｓｅｌｅｃｔ uid,uname,upass,sex,age,constellation,unative,national,labeltext from user where 1=1 limit #{pageNo},#{pagesize}

以及dao方法的传参

 public List selectAlllist( @Param("pageNo") Integer pageNo ,@Param("pagesize") Integer pagesize);

daoimpl的实现

@Overridepublic List selectAlllist(Integer pageNo, Integer pagesize) {// TODO Auto-generated method stubreturn user.selectAlllist(pageNo,pagesize);}

service的实现

public List selectAlllist(Integer pageNo, Integer pagesize);

serviceimpl的实现

@Overridepublic List selectAlllist(Integer pageNo, Integer pagesize) {// TODO Auto-generated method stubreturn usi.selectAlllist(pageNo,pagesize);}