溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
layui中怎么實現分頁，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
效果圖如下
分頁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")@ResponseBodypublic 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 blocke.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的實現
@Overridepublic List<User> selectAlllist(Integer pageNo, Integer pagesize) {// TODO Auto-generated method stubreturn user.selectAlllist(pageNo,pagesize);}service的實現
public List<User> selectAlllist(Integer pageNo, Integer pagesize);
serviceimpl的實現
@Overridepublic List<User> selectAlllist(Integer pageNo, Integer pagesize) {// TODO Auto-generated method stubreturn usi.selectAlllist(pageNo,pagesize);}看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
