layui 數(shù)據(jù)表格 點(diǎn)擊分頁按鈕 監(jiān)聽事件的實(shí)例
找了 很多 關(guān)于表格分頁 點(diǎn)擊事件 請(qǐng)求, table.render 并不支持監(jiān)聽點(diǎn)擊事件,所以我就把 table.render 和 laypage.render結(jié)合在一起
(我也不想寫分頁的,但是后臺(tái)講數(shù)據(jù)多 ,要加分頁,被逼無奈 ,想了一個(gè)方法)
先上圖
代碼
.html
<div> <table class="layui-hide" id="test" lay-filter="demo"></table> <div id="page"></div> </div>
.js
//頁面第一次請(qǐng)求 默認(rèn) 1頁 10條 function dataLists(pageNum, numPerPage) { $.post(Url + 'pipei_dj/pagelist', { pageNum: pageNum, // 頁碼數(shù) numPerPage: numPerPage // 每頁條數(shù) }, function (data) { let datalist = JSON.parse(data) dataList(datalist) // 數(shù)據(jù)傳到 table組件 page(datalist) // 數(shù)據(jù)傳到 分頁組件 }) } dataLists(1, 10) function page(data) { laypage.render({ elem: 'page', //注意,這里的 page 是 ID,不用加 # 號(hào) count: data.totalCount, //數(shù)據(jù)總數(shù),從服務(wù)端得到 limit: data.numPerPage, // 每頁條數(shù) limits: [10, 20, 30, 40, 50], layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], jump: function (obj, first) { //console.log(obj) //obj包含了當(dāng)前分頁的所有參數(shù),比如: //console.log(obj.curr); //得到當(dāng)前頁,以便向服務(wù)端請(qǐng)求對(duì)應(yīng)頁的數(shù)據(jù)。 //console.log(obj.limit); //得到每頁顯示的條數(shù) //首次不執(zhí)行 if (!first) { //do something numpage(obj.curr, obj.limit) // 分頁點(diǎn)擊傳參 } } }); } // 從新寫了 一個(gè)請(qǐng)求 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: '序號(hào)', type: "numbers" }, { field: 'id', title: 'id', hide: true }, { field: 'status', title: '狀態(tài)', hide: true }, { field: 'danjia', title: '單價(jià)(¥)' }, { field: 'createtime', title: '創(chuàng)建時(shí)間' }, { field: 'status', title: '狀態(tài)', toolbar: '#barstate' }, { title: '操作', toolbar: '#barDemo' }] ], data: data.dataList, // 數(shù)據(jù) limit: data.numPerPage, // 顯示的條數(shù) //page: true, // 開啟分頁 }); }
以上這篇layui 數(shù)據(jù)表格 點(diǎn)擊分頁按鈕 監(jiān)聽事件的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap源碼解讀媒體對(duì)象、列表組和面板(10)
這篇文章主要源碼解讀了Bootstrap媒體對(duì)象、列表組和面板,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12根據(jù)選擇不同的下拉值出現(xiàn)相對(duì)應(yīng)的文本輸入框
根據(jù)用戶選擇不同的下拉值,出現(xiàn)相應(yīng)的文本輸入框,在某些情況下比較實(shí)用,本文為大家寫了個(gè),有需求的朋友可以參考下2013-08-08JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08js字符串轉(zhuǎn)換成xml對(duì)象并使用技巧解讀
在js中有方法可以將字符串轉(zhuǎn)化為xml對(duì)象,感興趣的朋友可以參考下面的代碼片段,希望對(duì)你有所幫助2013-04-04HTML+CSS+JS實(shí)現(xiàn)抓娃娃機(jī)游戲
這篇文章主要介紹了如何利用HTML+CSS+JS制作抓娃娃機(jī)游戲,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04js replace替換字符串同時(shí)替換多個(gè)方法
這篇文章主要介紹了js replace替換字符串同時(shí)替換多個(gè)方法 的相關(guān)資料,需要的朋友可以參考下2018-11-11