html 表单数据自动分页,layui+nicePage.js实现JSON自动表格分页代码
时间: 2024-02-27 18:53:57 浏览: 7
好的,以下是一个简单的示例代码,使用 layui 和 nicePage.js 库实现自动分页。
HTML 代码:
```html
<!-- 表格容器 -->
<div id="data-table"></div>
<!-- 分页容器 -->
<div id="page-container"></div>
```
JavaScript 代码:
```javascript
// 模拟 JSON 数据
var data = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 },
{ id: 4, name: '赵六', age: 35 },
{ id: 5, name: '钱七', age: 40 },
{ id: 6, name: '孙八', age: 45 },
{ id: 7, name: '周九', age: 50 },
{ id: 8, name: '吴十', age: 55 },
{ id: 9, name: '郑十一', age: 60 },
{ id: 10, name: '冯十二', age: 65 },
{ id: 11, name: '陈十三', age: 70 },
{ id: 12, name: '楚十四', age: 75 },
{ id: 13, name: '魏十五', age: 80 }
];
// 定义表格列
var columns = [
{ field: 'id', title: 'ID' },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' }
];
// 渲染表格
layui.use(['table', 'laypage'], function () {
var table = layui.table;
var laypage = layui.laypage;
table.render({
elem: '#data-table',
cols: [columns],
data: data,
limit: 5
});
// 渲染分页
laypage.render({
elem: '#page-container',
count: data.length,
limit: 5,
jump: function (obj) {
table.reload('data-table', {
page: {
curr: obj.curr
}
});
}
});
});
```
这段代码使用 layui 的 table 组件渲染表格,并使用 nicePage.js 库渲染分页。在分页的 `jump` 回调函数中,通过 `table.reload` 方法重新加载表格数据,实现自动分页。