記錄每一個小坑、大坑
一般項目中表格加分頁是必要的，看官方文檔整理一個簡單的例子
0. 其它
1. LayUI
LayUI是比較常用的框架，效果還是挺好的- 效果
2. 實例
- 在需要的地方添加表格容器
<table class="layui-hide" id="test" lay-filter="test"></table>
- 同時添加分頁容器
<div id="demo1" style="float: right;margin-right: 10px;"></div>
-
兩個容器節點的ID具有唯一性
-
記得引入
jQuery與layUI相關 js 、 css -
使用
GetList()
function GetList(STIME='2019-06-01 00:00:00',ETIME='2019-06-08 23:59:59',curr, cid, dat) {
var sizes = 19
// 獲取服務器數據
$.ajax({
type: 'GET',
url: localStorage.baseUrl + `/Devicetsphis/GetDevicetsphisListByDeviceidTypeTime?TOKEN=${localStorage.token}`,
async: true,
data: {
STIME: STIME,
ETIME: ETIME,
page: curr || 1,
size:sizes
},
success: function (data) {
// 打印數據
console.log(data)
if (data.code === 0) {
let getdata = data.rows
// console.log(getdata)
// 引入表格與分頁組件
layui.use(['laypage', 'table', 'layer'], function () {
var table = layui.table;
var laypage = layui.laypage
, layer = layui.layer;
// 表格組件
table.render({
elem: '#test' // 定位表格ID
, height: myheight-96 // 可自定義高度
, title: '用戶數據表'
, cols: [[
// 根據獲取的數據，填入 field
// sort 為排序功能
// 不定義寬度，則為自定義分配
{field: 'DEVICE_ID', title: '設備號', fixed: 'left', unresize: true, sort: true}
, {field: 'PKEY', title: '模式', edit: 'text', sort: true}
, {field: 'PVALUE', title: '數據', edit: 'text'}
, {field: 'INTIME', title: '更新時間', edit: 'text', sort: true}
, {field: 'BATCH_ID', title: '未知'}
, {field: 'ID', title: 'ID'}
]]
, data: getdata // 上面異步獲取的數據，必填
,limit: sizes // 每一頁自定義數據條數
, done : function () {
// 分頁組件
laypage.render({
elem: 'demo1' // 根據ID定位
, count: data.totalcount // 獲取的數據總數
,limit: sizes // 每頁默認顯示的數量，同上
, curr: curr || 1 // 頁碼
, jump: function (obj, first) {
// console.log(obj, first)
if (!first) { //點擊跳頁觸發函數自身，並傳遞當前頁：obj.curr
GetList(STIME, ETIME, obj.curr, cid, dat); // 自調用
}
}
});
}
});
});
} else {
layui.use('layer', function () {
var layer = layui.layer;
layer.msg('獲取信息出錯!');
});
}
}
})
}
3. 異步獲取的數據結構
- 數據結構
4. 結束
其它任何操作都可以基於這個例子開發
比如：頭工具欄事件
就像拼積木，再加比如時間、事件、搜索等，都很方便
