新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
layui實(shí)現(xiàn)數(shù)據(jù)分頁(yè)功能
本文實(shí)例為大家分享了layui實(shí)現(xiàn)數(shù)據(jù)分頁(yè)功能,供大家參考,具體內(nèi)容如下
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名注冊(cè)、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、茌平網(wǎng)站維護(hù)、網(wǎng)站推廣。
官網(wǎng)layui table演示頁(yè)面
示例截圖:
頁(yè)面引入layui.css、 layui.js
前臺(tái)js
var limitcount = 10; var curnum = 1; //列表查詢方法 function productsearch(productGroupId,start,limitsize) { layui.use(['table','laypage','laydate'], function(){ var table = layui.table, laydate=layui.laydate, laypage = layui.laypage; table.render({ elem: '#layui_table_id' , url: '<%=path%>/xx/pListQuery.html?pId='+productGroupId+'¤tPage='+ start+'¤tNumber=' + limitsize /*, where:{pagename:start,pagelimit:limitsize} //傳參*/ , cols: [[ {field: 'productId', title: 'ID', width: '170', sort: true} , {field: 'productName', title: '名稱', width: '450'} , {field: 'productState', title: '狀態(tài)', width: '100'} , {field: 'effectTime', title: '生效時(shí)間', width: '120', sort: true} , {field: 'invalidTime', title: '失效時(shí)間', width: '120', sort: true} , {field: 'productCost', title: '成本', width: '100', sort: true} , {field: 'poperation', title: '操作', width: '100',fixed: 'right', toolbar: '#barDemo'} ]] , page: false , height: 430 ,done: function(res, curr, count){ //如果是異步請(qǐng)求數(shù)據(jù)方式,res即為你接口返回的信息。 //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當(dāng)前頁(yè)數(shù)據(jù)、count為數(shù)據(jù)總長(zhǎng)度 laypage.render({ elem:'laypage' ,count:count ,curr:curnum ,limit:limitcount ,layout: ['prev', 'page', 'next', 'skip','count','limit'] ,jump:function (obj,first) { if(!first){ curnum = obj.curr; limitcount = obj.limit; //console.log("curnum"+curnum); //console.log("limitcount"+limitcount); //layer.msg(curnum+"-"+limitcount); productsearch(productGroupId,curnum,limitcount); } } }) } }) //監(jiān)聽工具條 table.on('tool(test)', function(obj){ //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值" var data = obj.data //獲得當(dāng)前行數(shù)據(jù) ,layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值 if(layEvent === 'detail'){ viewLableInfo(data.attrId); layer.msg(data.attrId); } else if(layEvent === 'del'){ layer.msg('刪除'); } else if(layEvent === 'edit'){ layer.msg('編輯操作'); } }); //常規(guī)用法 laydate.render({ elem: '#createDate' }); //常規(guī)用法 laydate.render({ elem: '#processingTime' }); }); } var pId = '${pGBean.pgId }'; productsearch(pId, curnum, limitcount);
業(yè)務(wù)邏輯層
@Override public String queryList (HttpServletRequest request) { String total = ""; String pId = request.getParameter("pId"); int currentNumber = Integer.parseInt(request.getParameter("currentNumber")); String currentPage = request.getParameter("currentPage") == null ? "1" : request.getParameter("currentPage"); //分頁(yè)處理,顯示第一頁(yè)的30條數(shù)據(jù)(默認(rèn)值) PageHelper.startPage(Integer.parseInt(currentPage), currentNumber); Listlist = exportDao.queryList (pId); if(list.size() > 0){ total = list.get(0).getTotal(); } Page page = PageHelper.localPage.get(); if(page!=null){ page.setCurrentPage(Integer.parseInt(currentPage)); } PageHelper.endPage(); JSONObject jsonObject = new JSONObject(); jsonObject.put("code", 0); jsonObject.put("msg", ""); jsonObject.put("count", total); jsonObject.put("data", list); //System.out.println("json:----" + jsonObject.toString()); return jsonObject.toString(); }
sql
其中sql在計(jì)算總數(shù)totle時(shí)可以這么寫
COUNT(*) OVER(PARTITION BY 1) AS TOTAL
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前題目:layui實(shí)現(xiàn)數(shù)據(jù)分頁(yè)功能
轉(zhuǎn)載來(lái)于:http://fisionsoft.com.cn/article/ijoogi.html