layui 數(shù)據(jù)表格 點(diǎn)擊分頁(yè)按鈕 監(jiān)聽(tīng)事件的實(shí)例
找了 很多 關(guān)于表格分頁(yè) 點(diǎn)擊事件 請(qǐng)求, table.render 并不支持監(jiān)聽(tīng)點(diǎn)擊事件,所以我就把 table.render 和 laypage.render結(jié)合在一起
(我也不想寫(xiě)分頁(yè)的,但是后臺(tái)講數(shù)據(jù)多 ,要加分頁(yè),被逼無(wú)奈 ,想了一個(gè)方法)
先上圖

代碼
.html
<div> <table class="layui-hide" id="test" lay-filter="demo"></table> <div id="page"></div> </div>
.js
//頁(yè)面第一次請(qǐng)求 默認(rèn) 1頁(yè) 10條
function dataLists(pageNum, numPerPage) {
$.post(Url + 'pipei_dj/pagelist', {
pageNum: pageNum, // 頁(yè)碼數(shù)
numPerPage: numPerPage // 每頁(yè)條數(shù)
}, function (data) {
let datalist = JSON.parse(data)
dataList(datalist) // 數(shù)據(jù)傳到 table組件
page(datalist) // 數(shù)據(jù)傳到 分頁(yè)組件
})
}
dataLists(1, 10)
function page(data) {
laypage.render({
elem: 'page', //注意,這里的 page 是 ID,不用加 # 號(hào)
count: data.totalCount, //數(shù)據(jù)總數(shù),從服務(wù)端得到
limit: data.numPerPage, // 每頁(yè)條數(shù)
limits: [10, 20, 30, 40, 50],
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
//console.log(obj)
//obj包含了當(dāng)前分頁(yè)的所有參數(shù),比如:
//console.log(obj.curr); //得到當(dāng)前頁(yè),以便向服務(wù)端請(qǐng)求對(duì)應(yīng)頁(yè)的數(shù)據(jù)。
//console.log(obj.limit); //得到每頁(yè)顯示的條數(shù)
//首次不執(zhí)行
if (!first) {
//do something
numpage(obj.curr, obj.limit) // 分頁(yè)點(diǎn)擊傳參
}
}
});
}
// 從新寫(xiě)了 一個(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, // 開(kāi)啟分頁(yè)
});
}
以上這篇layui 數(shù)據(jù)表格 點(diǎn)擊分頁(yè)按鈕 監(jiān)聽(tīng)事件的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于BootStrap柵格欄系統(tǒng)完成網(wǎng)站底部版權(quán)信息區(qū)
網(wǎng)站底部版權(quán)信息區(qū)可以用bootstrap的“柵格系統(tǒng)”完成,下面給大家分享一個(gè)未經(jīng)處理的底部版權(quán)信息區(qū)的樣式,大家可以做個(gè)參考2016-12-12
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件功能,涉及微信小程序事件響應(yīng)及樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
JS控件autocomplete 0.11演示及下載 1月5日已更新
JS控件autocomplete 0.11演示及下載 1月5日已更新...2007-01-01
bootstrap中使用google prettify讓代碼高亮的方法
使用google prettify 讓代碼高亮非常漂亮,接下來(lái)通過(guò)本文給大家介紹bootstrap中使用google prettify讓代碼高亮的方法,感興趣的朋友一起看看吧2016-10-10
JS實(shí)現(xiàn)標(biāo)簽滾動(dòng)切換效果
這篇文章給大家?guī)?lái)的是用JS實(shí)現(xiàn)item標(biāo)簽點(diǎn)擊后滾動(dòng)切換的效果,有興趣的朋友測(cè)試學(xué)習(xí)下吧。2017-12-12
JavaScript內(nèi)置對(duì)象math,global功能與用法實(shí)例分析
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象math,global功能與用法,結(jié)合實(shí)例形式分析了javascript中內(nèi)置對(duì)象math與global的基本概念、功能及使用方法,需要的朋友可以參考下2019-06-06

