实现分页需要用到
layui中的table模块。具体实现步骤如下：
1. 在HTML页面中添加一个table容器，如下所示：
```
<table id="demo" lay-filter="test"></table>
```
2. 在JS代码中引入
layui模块，创建table实例，设置table
参数，如下所示：
```
layui.use('table', function(){
var table =
layui.table;
//执行一个 table 实例
table.render({
elem: '#demo',
url: '/demo/table/user/', //数据接口
page: true, //开启分页
cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
{field: 'username', title: '用户名', width:120},
{field: 'sex', title: '性别', width:80, sort: true},
{field: 'city', title: '城市', width:100},
{field: 'sign', title: '签名', width: 200},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true,
totalRow: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
});
```
其中，url为数据接口，需要根据实际情况
进行替换。
3. 在分页组件的 jump 回调函数中，重新渲染数据列表，如下所示：
```
layui.use('table', function(){
var table =
layui.table;
//分页组件的 jump 回调函数
function jumpCallback(obj, first) {
//重新渲染数据列表
table.reload('demo', {
where: {
//接口的其它
参数
page: obj.curr,
limit: obj.limit
},
page: {
curr: obj.curr //更新当前页码
}
});
}
});
```
其中，'demo'为table的lay-filter属性值，也就是table的ID，需要和HTML页面中的ID一致。
4. 在数据接口中，根据分页
参数进行数据的筛选和返回，如下所示：
```
var data = [
{id:1, username:'张三', sex:'男', city:'北京', sign:'我是一个好人', experience: '116', score: '67', classify: '作家', wealth: '9999999'},
{id:2, username:'李四', sex:'女', city:'上海', sign:'我是一个坏人', experience: '12', score: '21', classify: '诗人', wealth: '666'},
...
];
app.get('/demo/table/user/', function(req, res){
var page = req.query.page || 1;
var limit = req.query.limit || 10;
var start = (page - 1) * limit;
var end = start + limit;
var result = {
"code": 0,
"msg": "",
"count": data.length,
"data": data.slice(start, end)
}
res.send(result);
});
```
其中，data为模拟的数据，可以根据实际情况
进行替换。需要根据分页
参数计算出需要返回的数据。
扫一扫
5411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
