html 表单数据自动分页,layui+nicePage.js实现JSON自动表格分页代码
时间: 2024-02-27 17:52:37 浏览: 159
很高兴为您解答这个问题。以下是一个简单的示例代码,使用Layui和nicePage.js来实现JSON自动表格分页:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表单数据自动分页</title>
<link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.6/css/layui.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/nicepage/1.2.0/nicepage.css">
</head>
<body>
<div class="layui-container">
<table id="data_table" class="layui-table"></table>
<div id="page"></div>
</div>
<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/layui/2.5.6/layui.min.js"></script>
<script src="//cdn.bootcss.com/nicepage/1.2.0/jquery.nicepage.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
// 模拟JSON数据
var data = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 },
{ id: 4, name: '赵六', age: 28 },
{ id: 5, name: '陈七', age: 30 },
{ id: 6, name: '周八', age: 35 },
{ id: 7, name: '吴九', age: 40 },
{ id: 8, name: '郑十', age: 50 }
];
// 渲染表格
table.render({
elem: '#data_table',
cols: [[
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: '姓名', width: 120 },
{ field: 'age', title: '年龄', width: 80 }
]],
data: data
});
// 分页
$('#page').nicePage({
pageNo: 1,
pageSize: 3,
totalRows: data.length,
autoLoad: true,
callback: function(pageNo, pageSize){
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
table.reload('data_table', {
data: data.slice(start, end)
});
}
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用Layui的table模块来渲染表格,然后使用nicePage.js来实现自动分页。我们首先定义了一个模拟的JSON数据数组,然后使用`table.render()`方法将数据渲染到表格中。接下来,我们使用nicePage.js来创建一个分页控件,并在`callback`回调函数中使用`table.reload()`方法动态加载表格数据。在这个回调函数中,我们根据当前页码和每页显示的行数来计算出要显示的数据的起始和结束位置,然后使用`slice()`方法从原始数据数组中获取相应的数据,并使用`reload()`方法重新加载表格。这样,我们就可以实现自动分页的表格了。
阅读全文