layui中怎么實現(xiàn)分頁-創(chuàng)新互聯(lián)

layui中怎么實現(xiàn)分頁，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為眉山企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)，眉山網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

效果圖如下

分頁jsp和js內(nèi)容模塊，暫時寫在了一塊，當(dāng)然也可以提出來寫個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>  <!-- 注意：如果你直接復(fù)制所有代碼到本地，上述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 組件的所有參數(shù)（某些參數(shù)除外，如：jump/elem） - 詳見文檔    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局        ,groups: 1 //只顯示 1 個連續(xù)頁碼        ,first: false //不顯示首頁        ,last: false //不顯示尾頁              }    //顯示字段參數(shù)    ,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>

后臺實現(xiàn)

主要的地方就是page<當(dāng)前頁，比如1頁>、limit<當(dāng)前顯示數(shù)據(jù)，比如10條數(shù)據(jù)>、count<當(dāng)前表總數(shù)據(jù)條數(shù)>，其他的事情有l(wèi)ayui分頁插件來做(jsp頁面有該代碼)，只要page、limit、count這三個值，分頁就能實現(xiàn)

//分頁插件    ,page: { //支持傳入 laypage 組件的所有參數(shù)（某些參數(shù)除外，如：jump/elem） - 詳見文檔    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局        ,groups: 1 //只顯示 1 個連續(xù)頁碼        ,first: false //不顯示首頁        ,last: false //不顯示尾頁              }

返回object類型，js會將這個類型當(dāng)做json數(shù)據(jù)

@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);//查詢總數(shù)量List<User> listsize = user.findAll();//分頁傳參page<當(dāng)前頁>和limit<顯示數(shù)據(jù)條數(shù)>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("條數(shù)："+list.size());Map<String, Object> result = new HashMap<String, Object>();int count = listsize.size();  JSONArray json = JSONArray.fromObject(list);  String js=json.toString();        //*****轉(zhuǎn)為layui需要的json格式，必須要這一步，博主也是沒寫這一步，在頁面上數(shù)據(jù)就是數(shù)據(jù)接口異常          String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}";         System.out.println(jso);         return jso;   }

對應(yīng)的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的實現(xiàn)

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

service的實現(xiàn)

public List<User> selectAlllist(Integer pageNo, Integer pagesize);

serviceimpl的實現(xiàn)

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

分享文章：layui中怎么實現(xiàn)分頁-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://bm7419.com/article32/cecgpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、做網(wǎng)站、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站收錄、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管