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

代碼
.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, // 頁碼數(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,不用加 # 號
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包含了當前分頁的所有參數(shù),比如:
//console.log(obj.curr); //得到當前頁,以便向服務(wù)端請求對應(yīng)頁的數(shù)據(jù)。
//console.log(obj.limit); //得到每頁顯示的條數(shù)
//首次不執(zhí)行
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: '狀態(tài)',
hide: true
}, {
field: 'danjia',
title: '單價(¥)'
}, {
field: 'createtime',
title: '創(chuàng)建時間'
}, {
field: 'status',
title: '狀態(tài)',
toolbar: '#barstate'
}, {
title: '操作',
toolbar: '#barDemo'
}]
],
data: data.dataList, // 數(shù)據(jù)
limit: data.numPerPage, // 顯示的條數(shù)
//page: true, // 開啟分頁
});
}
以上這篇layui 數(shù)據(jù)表格 點擊分頁按鈕 監(jiān)聽事件的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于BootStrap柵格欄系統(tǒng)完成網(wǎng)站底部版權(quán)信息區(qū)
網(wǎng)站底部版權(quán)信息區(qū)可以用bootstrap的“柵格系統(tǒng)”完成,下面給大家分享一個未經(jīng)處理的底部版權(quán)信息區(qū)的樣式,大家可以做個參考2016-12-12
微信小程序?qū)崿F(xiàn)動態(tài)顯示和隱藏某個控件功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動態(tài)顯示和隱藏某個控件功能,涉及微信小程序事件響應(yīng)及樣式動態(tài)操作相關(guān)實現(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 讓代碼高亮非常漂亮,接下來通過本文給大家介紹bootstrap中使用google prettify讓代碼高亮的方法,感興趣的朋友一起看看吧2016-10-10
JavaScript內(nèi)置對象math,global功能與用法實例分析
這篇文章主要介紹了JavaScript內(nèi)置對象math,global功能與用法,結(jié)合實例形式分析了javascript中內(nèi)置對象math與global的基本概念、功能及使用方法,需要的朋友可以參考下2019-06-06

