layui實現資料分頁功能
示例截圖:
頁面引入layui.css、 layui.js
<div id="pTable" style="width: 1200px;">
<table class="layui-table" id="layui_table_id" lay-filter="test">
</table>
<div id="laypage"></div>
</div>
===================前臺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: '狀態', width: '100'} , {field: 'effectTime', title: '生效時間', width: '120', sort: true} , {field: 'invalidTime', title: '失效時間', 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){ //如果是非同步請求資料方式,res即為你介面返回的資訊。 //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當前頁資料、count為資料總長度 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); } } }) } }) //監聽工具條 table.on('tool(test)', function(obj){ //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對應的值" var data = obj.data //獲得當前行資料 ,layEvent = obj.event; //獲得 lay-event 對應的值 if(layEvent === 'detail'){ viewLableInfo(data.attrId); layer.msg(data.attrId); } else if(layEvent === 'del'){ layer.msg('刪除'); } else if(layEvent === 'edit'){ layer.msg('編輯操作'); } }); //常規用法 laydate.render({ elem: '#createDate' }); //常規用法 laydate.render({ elem: '#processingTime' }); }); } var pId = '${pGBean.pgId }'; productsearch(pId, curnum, limitcount);
===================業務邏輯層===================
@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"); //分頁處理,顯示第一頁的30條資料(預設值) PageHelper.startPage(Integer.parseInt(currentPage), currentNumber); List<PExl> list = 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在計算總數totle時可以這麼寫
COUNT(*) OVER(PARTITION BY 1) AS TOTAL
相關推薦
layui實現資料分頁功能
示例截圖: 頁面引入layui.css、 layui.js <div id="pTable" style="width: 1200px;"> <table class="layui-table" id="layu
javascript實現獲取json資料分頁功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>無標題文件</title> <script> var a={"co
前端請求後端,後端查詢完畢傳到前端 ,用layui 將 資料分頁
前端:我用的是layui框架的分頁 js 檔案 layui.config({base : "script/" }).use(['form','layer','jquery','laypage'],function(){var form = layui.form(),layer = paren
基於freemark,ssm和Oracle實現的分頁功能
freemark頁面`<#list mesgList as mesg> m e
jquery easyUI ajax載入資料分頁功能
分享一下我老師大神的人工智慧教程吧。零基礎,通俗易懂!風趣幽默!http://www.captainbed.net/ 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!
SpringBoot+Easyui+pagehelper實現真分頁功能
1.首先引入jar包 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <ve
ThinkPHP5.0+aceAdmin+dataTables實現非同步分頁功能
最近在寫後臺的資料管理,有的時候由於資料過多需要使用分頁功能,而我作為一個前端,由於用習慣了非同步請求的功能在使用dataTables這個外掛的時候,它也提供了利用Ajax來實現非同步的分頁功能,所以就去官網看了一下。 dataTables官網 後臺資料列表頁,用的是ThinkPHP5框架+ac
Vue中BootStrap實現表格分頁功能(頁碼過多時帶省略號)
1、首先需要在vue-cli專案中配置bootstrap,jquery 2、 然後新建vue檔案,如index.vue,index.vue內容如下: 3、配置路由即可執行實現。 <template> <div class="tTable cont
PHP+Mysql 實現資料分頁顯示
獲取結果集中的記錄數可以在SELECT語句中使用COUNT()函式獲取結果集中的記錄數量 設定每頁顯示記錄的數量假定使用變數$PageSize來儲存每頁顯示記錄的數量,它的值由 使用者根據需要自行設定
vue+elementUI元件table實現前端分頁功能
前端分頁和後端分頁就是請求的差異,前端分頁的話只請求一次,所以要在render table元件的時候控制下資料 :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" //不
利用VUE框架,實現列表分頁功能
原創作品轉載請註明出處 先來看一下效果圖: 功能描述: 1. 點選頁面序號跳轉到相應頁面; 2. 點選單左/單右,向後/向前跳轉一個頁面; 3. 點選雙左/雙右,直接跳轉到最後一頁/第一頁; 3. 一次顯示當前頁面的前三個與後三
java後臺如何實現頁面分頁功能
在做購物平臺或者考試系統等資料量很多的開發專案時,分頁是個必不可少的功能。分頁也有很多種實現方法,如何才能做到又簡單,又不佔用太多資源的分頁功能呢?最近,本人在編寫購物平臺時用到的分頁實現自認為還不錯,適合初學者借鑑。好,閒話不多說,上程式碼: 先建立一
Android Demo之旅 ListView底部新增載入更多按鈕實現資料分頁
在我們的實際專案中,資料應該說是很多的,我們的ListView不可能一下子把資料全部載入進來,我們可以當滾動條滾動到ListView的底部的時候,給一個更多的提示,當我們點選它即載入下一頁的資料,相當與我們的分頁效果,參考網上的東西,寫了一個小小的demo,並總結了一些知識
MVC3使用MvcPager實現簡單分頁功能
使用MvcPager分頁,操作簡單,更多內容參考MvcPager(http://www.webdiyer.com/),下面實現簡單的分頁。一、新建Mvc3空專案MvcPagerDemo。二、建立PersonModel,姓名和年齡兩個屬性,程式碼如下。using Syste
jsp實現簡單分頁功能
一.webcontend層1.webcontent/common/meta.jsp程式碼:<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageConte
Hibernate如何使用HQL語句實現資料分頁查詢
實現資料分頁查詢 使用Query介面的 setFirstResult (int firstResult) 方法 和 setMaxResult (int maxResult) 方法實現 setFirstResult (int firstResult) 方法 :設定返回
實現layUI的Ajax非同步分頁功能
1. laypage模組自行到官方檢視官方文件。任何資料都不及官方文件專業、詳細。 https://www.layui.com/doc/modules/laypage.html 官方分頁文件 https://www.layui.com/demo/layp
java 三層架構 實現資料的顯示和分頁功能
/* * <!-- 隱藏域 false:表示點選的是上頁下頁 true:表示點選的是 "搜尋" 按鈕 --> <input type="hidden" name="flag" id="flag" value="true" > */
MySQL中資料結果集分頁功能的實現方法;資料庫查詢返回特定結果即分頁查詢
因為欣賞所以轉載 原文地址 http://blog.csdn.net/andkylee/article/details/5637638 http://www.2cto.com/database/201306/218771.html 目前B/S架構的軟體大行其道。通過瀏覽
js實現資料載入分頁功能的實現(通用)
html: <div class="tishi"></div> <table id="dataList" class="table table-bordered text-center" style=""> &