layui表格排序对所有分页数据排序静态效果演示程序
layui表格排序对所有分页数据排序静态效果演示程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui表格排序对所有分页数据排序</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {
padding: 20px;
}
</style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container"></div>
</script>
<script type="text/html" id="barDemo"></script>
<table id="demo" lay-filter="demo"></table>
<script src="../src/layui.js" charset="utf-8"></script>
<script>
layui.use(['table'], function () {
var table = layui.table, $ = layui.$;
// 服务端返回的原始数据(没有进行排序的数据)
var statListData = {
"status": 0,
"message": "ok",
"total": 5,
"data": {
"list": [
{
"id": 1,
"date": "2022-07-11",
"pv": 20,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 2,
"date": "2022-07-12",
"pv": 38,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 3,
"date": "2022-07-13",
"pv": 29,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 4,
"date": "2022-07-14",
"pv": 35,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 5,
"date": "2022-07-15",
"pv": 99,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
}
]
}
};
// 服务端返回的排序(升序)后的数据
var ascOrderedStatListData = {
"status": 0,
"message": "ok",
"total": 5,
"data": {
"list": [
{
"id": 1,
"date": "2022-07-11",
"pv": 20,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 3,
"date": "2022-07-13",
"pv": 29,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 4,
"date": "2022-07-14",
"pv": 35,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 2,
"date": "2022-07-12",
"pv": 38,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 5,
"date": "2022-07-15",
"pv": 99,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
}
]
}
};
// 服务端返回的排序(降序)后的数据
var descOrderedStatListData = {
"status": 0,
"message": "ok",
"total": 5,
"data": {
"list": [
{
"id": 5,
"date": "2022-07-15",
"pv": 99,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 2,
"date": "2022-07-12",
"pv": 38,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 4,
"date": "2022-07-14",
"pv": 35,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 3,
"date": "2022-07-13",
"pv": 29,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 1,
"date": "2022-07-11",
"pv": 20,
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
}
]
}
};
// 由于是演示程序, 默认直接取出静态数据用于表格渲染
var listData = statListData.data.list;
// 表格渲染
table.render({
elem: '#demo',
// url: 'http://localhost/getStatList', // 这里是服务端接口的地址
data: listData, // 直接赋值静态数据。真实数据需要通过请求服务端接口获取, 由于是静态演示程序, 不涉及服务端, 这里直接使用data字段设置静态数据
page: true,
autoSort: true,
loading : true,
limits: [2, 5, 10, 20, 50],
limit: 2,
toolbar: '#toolbarDemo',
cols: [[
{field: 'id', title: 'ID'},
{field: 'date', title: '日期'},
{field: 'pv', title: 'PV', sort: true},
{field: 'createTime', title: '创建时间'},
{field: 'updateTime', title: '最近一次更新时间'}
]],
parseData: function (res) {
},
done: function (res, curr, count) {
},
error: function (res, msg) {
console.log(res, msg)
}
});
// 监听表格排序事件
table.on('sort(demo)', function(obj){
// 由于是静态演示程序, 不涉及服务端, 这里直接根据排序的类型手动设置表格的数据
var tableData = statListData;
if (obj.type == "asc") {
tableData = ascOrderedStatListData;
} else if (obj.type == "desc") {
tableData = descOrderedStatListData;
}
// 重载表格数据
table.reload('demo', {
page: {
curr: 1
},
where: {
orderKey: obj.field,
orderValue: obj.type
},
data: tableData.data.list // 由于是静态演示程序, 不涉及服务端, 这里直接更新表格data字段的值
});
});
});
</script>
</body>
</html>程序运行效果图：
