layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能，以搜索功能為例

加載數(shù)據(jù)表格

實(shí)現(xiàn)搜索功能和數(shù)據(jù)表格重載

全部代碼

加載數(shù)據(jù)表格

按照layui官方文檔示例

HTML部分

JavaScript部分

var table = layui.table;

//執(zhí)行渲染

table.render({

elem: '#demo' //指定原始表格元素選擇器(推薦id選擇器)

,height: 315 //容器高度

,cols: [{}] //設(shè)置表頭

//,…… //更多參數(shù)參考右側(cè)目錄：基本參數(shù)選項(xiàng)

});

官方的文檔已經(jīng)把方法說的很明白了，下面展示實(shí)例用法(HTML部分依照官方文檔，不用修改)

layui.use('table', function () {

var table = layui.table;

table.render({

// 表格容器ID

elem: '#ware_info'

// 表格ID，必須設(shè)置，重載部分需要用到

, id: 'tableOne'

// 數(shù)據(jù)接口鏈接

, url: "異步請求數(shù)據(jù)接口地址"

// 附加參數(shù)，post token

, where: {'token': token}

, method: 'post'

// 分頁 curr起始頁，groups連續(xù)顯示的頁碼，默認(rèn)每頁顯示的條數(shù)

, page: {

layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']

, curr: 1

, groups: 6

, limit: 20

}

, cols: [[

{fixed: 'lift', title: '序號', type: 'numbers', minWidth: 60, align: 'center',}

, {field: 'part', title: '類型', align: 'center', width: 120}

, {field: 'uid', title: 'UID', align: 'center', width: 200, sort: true, event: 'details', style: 'color: #0066CC; cursor:pointer;'}

, {field: 'quantity', title: '數(shù)量', width: 120, align: 'center', event: 'setNumber', style: 'color: #0066CC; cursor:pointer;'}

, {field: 'description', title: '描述', align: 'center', minWidth: 80}

, {field: 'disable', title: '狀態(tài)', sort: true, width: 80, align: 'center',}

]]

});

});

實(shí)現(xiàn)搜索功能和數(shù)據(jù)表格重載

1、接口需求

需要有一個(gè)可以接收搜索條件并返回固定格式j(luò)son文件的數(shù)據(jù)接口。

2、注意要提前導(dǎo)入layui的依賴模塊

JavaScript部分代碼如下：

// 執(zhí)行搜索，表格重載

$('#do_search').on('click', function () {

// 搜索條件

var send_name = $('#send_name').val();

var send_data = $('#send_data').val();

table.reload('tableOne', {

method: 'post'

, where: {

'token': token,

'send_name': send_name,

'send_data': send_data,

}

, page: {

curr: 1

}

});

});

全部代碼

HTML部分

JavaScript部分

// 加載表格

layui.use('table', function () {

var table = layui.table;

table.render({

// 表格容器ID

elem: '#ware_info'

// 表格ID，必須設(shè)置，重載部分需要用到

, id: 'tableOne'

// 數(shù)據(jù)接口鏈接

, url: "你的異步數(shù)據(jù)接口地址"

// 附加參數(shù)，post token

, where: {'token': token}

, method: 'post'

// 分頁 curr起始頁，groups連續(xù)顯示的頁碼，默認(rèn)每頁顯示的條數(shù)

, page: {

layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']

, curr: 1

, groups: 6

, limit: 20

}

, cols: [[

{fixed: 'lift', title: '序號', type: 'numbers', minWidth: 60, align: 'center',}

, {field: 'part', title: '類型', align: 'center', width: 120}

, {field: 'uid', title: 'UID', align: 'center', width: 200, sort: true, event: 'details', style: 'color: #0066CC; cursor:pointer;'}

, {field: 'quantity', title: '數(shù)量', width: 120, align: 'center', event: 'setNumber', style: 'color: #0066CC; cursor:pointer;'}

, {field: 'description', title: '描述', align: 'center', minWidth: 80}

, {field: 'disable', title: '狀態(tài)', sort: true, width: 80, align: 'center',}

]]

});

// 執(zhí)行搜索，表格重載

$('#do_search').on('click', function () {

// 搜索條件

var send_name = $('#send_name').val();

var send_data = $('#send_data').val();

table.reload('tableOne', {

method: 'post'

, where: {

'csrfmiddlewaretoken': token,

'send_name': send_name,

'send_data': send_data,

}

, page: {

curr: 1

}

});

});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。

總結(jié)

以上是生活随笔為你收集整理的php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。