找了 很多 關于表格分頁 點擊事件 請求, table.render 并不支持監聽點擊事件,所以我就把 table.render 和 laypage.render結合在一起
(我也不想寫分頁的,但是后臺講數據多 ,要加分頁,被逼無奈 ,想了一個方法)
先上圖

代碼
.html
<div> <table class="layui-hide" id="test" lay-filter="demo"></table> <div id="page"></div></div>
.js
//頁面第一次請求 默認 1頁 10條function dataLists(pageNum, numPerPage) { $.post(Url + 'pipei_dj/pagelist', { pageNum: pageNum, // 頁碼數 numPerPage: numPerPage // 每頁條數 }, function (data) { let datalist = JSON.parse(data) dataList(datalist) // 數據傳到 table組件 page(datalist) // 數據傳到 分頁組件 }) } dataLists(1, 10)function page(data) { laypage.render({ elem: 'page', //注意,這里的 page 是 ID,不用加 # 號 count: data.totalCount, //數據總數,從服務端得到 limit: data.numPerPage, // 每頁條數 limits: [10, 20, 30, 40, 50], layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], jump: function (obj, first) { //console.log(obj) //obj包含了當前分頁的所有參數,比如: //console.log(obj.curr); //得到當前頁,以便向服務端請求對應頁的數據。 //console.log(obj.limit); //得到每頁顯示的條數 //首次不執行 if (!first) { //do something numpage(obj.curr, obj.limit) // 分頁點擊傳參 } } }); } // 從新寫了 一個請求 function numpage(pageNum, numPerPage) { $.post(Url + 'pipei_dj/pagelist', { pageNum: pageNum, numPerPage: numPerPage }, function (data) { let datalist = JSON.parse(data) dataList(datalist) // 傳到table組件 }) } // 表格渲染 function dataList(data) { table.render({ elem: '#test', cols: [ [{ title: '序號', type: "numbers" }, { field: 'id', title: 'id', hide: true }, { field: 'status', title: '狀態', hide: true }, { field: 'danjia', title: '單價(¥)' }, { field: 'createtime', title: '創建時間' }, { field: 'status', title: '狀態', toolbar: '#barstate' }, { title: '操作', toolbar: '#barDemo' }] ], data: data.dataList, // 數據 limit: data.numPerPage, // 顯示的條數 //page: true, // 開啟分頁 }); }以上這篇layui 數據表格 點擊分頁按鈕 監聽事件的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答