layui表格与layui分页组件搭配使用
时间: 2024-05-20 10:08:58 浏览: 28
layui表格与layui分页组件可以很好地搭配使用,可以实现数据的分页展示,具体使用方法如下:
1. 引入layui框架和相关样式文件:
```html
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
```
2. 创建一个容器用于展示表格和分页组件:
```html
<div id="demo"></div>
```
3. 编写JavaScript代码,渲染表格和分页组件:
```javascript
layui.use(['table', 'laypage'], function(){
var table = layui.table;
var laypage = layui.laypage;
// 表格渲染
table.render({
elem: '#demo',
url: '/data.json', // 数据接口
cols: [[ // 表头
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'sex', title: '性别', width: 80},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', width: 200},
{field: 'experience', title: '积分', width: 80},
{field: 'score', title: '评分', width: 80},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 120}
]]
});
// 分页组件渲染
laypage.render({
elem: 'demo', // 分页容器的id
count: 50, // 数据总数
limit: 10, // 每页显示的条数
curr: location.hash.replace('#!fenye=', ''), // 获取hash值作为当前页码
hash: 'fenye', // 自定义hash值
jump: function(obj, first){
if(!first){
// 非首次加载才会执行
table.reload('demo', {
where: { // 其他参数
page: obj.curr,
limit: obj.limit
}
});
}
}
});
});
```
以上代码中,`table.render()`函数用于渲染表格,`laypage.render()`函数用于渲染分页组件。其中,`table.reload()`函数用于重新加载表格数据,实现分页效果。