这是是基于自己搭建的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+"/";%><!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"><html><head> <meta charset="utf-8"> <title>layui</title> <link rel="stylesheet" href="<%=basepath %>js/layui/css/layui.css"> <script type="text/javascript" src="<%=basepath %>js/layui/layui.all.js"></script> <script type="text/javascript" src="<%=basepath %>js/layui/layui.js"></script> <script type="text/javascript" src="<%=basepath %>js/jquery-3.3.1.min.js"></script> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --></head><body> <div class="layui-form-item"> <div class="layui-input-inline"> <input type="text" name="selectvalue" id="selectvalue" lay-verify="required" placeholder="客户姓名，电话" autocomplete="off" class="layui-input"> </div> <button class="layui-btn" type="button" id="selectbutton">搜索</button> </div> <table class="layui-hide" id="test"></table> <script type="text/html" id="bardemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" οnclick="yhck()">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit"οnclick="yhbj()">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"οnclick="yhsc()">删除</a></script> <script>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'} ]] });});</script></body></html>
后台实现
主要的地方就是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") @responsebody public object userlist(httpservletrequest request, httpservletresponse response) { //分页 string pageno=request.getparameter("page"); string pagesize=request.getparameter("limit"); string uname=request.getparameter("selectvalue"); hashmap<string, object> map=new hashmap<string, object>(); map.put("pageno", (integer.valueof(pageno)-1)); map.put("pagesize", pagesize); //查询总数量 list<user> listsize = user.findall(); //分页传参page<当前页>和limit<显示数据条数> list<user> list=null; try { list = user.selectalllist((integer.parseint(pageno)-1)*integer.parseint(pagesize),integer.parseint(pagesize)); } catch (exception e) { // todo auto-generated catch block e.printstacktrace(); } system.out.println("条数："+list.size()); map<string, object> result = new hashmap<string, object>(); 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
select uid,uname,upass,sex,age,constellation,unative,national,labeltext from user where 1=1 limit #{pageno},#{pagesize}
以及dao方法的传参
public list<user> selectalllist( @param("pageno") integer pageno ,@param("pagesize") integer pagesize);
daoimpl的实现
@override public list<user> selectalllist(integer pageno, integer pagesize) { // todo auto-generated method stub return user.selectalllist(pageno,pagesize); }
service的实现
public list<user> selectalllist(integer pageno, integer pagesize);
serviceimpl的实现
@override public list<user> selectalllist(integer pageno, integer pagesize) { // todo auto-generated method stub return usi.selectalllist(pageno,pagesize); }
以上就是layui的分页怎么实现的详细内容。