在SpringMVC中获取后台数据,再使用layui分页
时间: 2023-12-03 17:42:15 浏览: 107
在SpringMVC中获取后台数据,并使用layui分页,可以按照以下步骤进行:
1. 在Controller中编写获取后台数据的方法,并返回数据:
```java
@RequestMapping("/getData")
@ResponseBody
public Map<String, Object> getData(@RequestParam("page") int page, @RequestParam("limit") int limit) {
List<Data> dataList = dataService.getDataList(page, limit);
int count = dataService.getCount();
Map<String, Object> result = new HashMap<>();
result.put("code", 0);
result.put("msg", "");
result.put("count", count);
result.put("data", dataList);
return result;
}
```
其中,getDataList方法是根据传入的page和limit参数获取对应的数据列表,getCount方法是获取数据总数。
2. 在页面中使用layui的table组件和分页组件展示数据:
```html
<table class="layui-table" lay-data="{url: '/getData', page: true, limit: 10}" lay-filter="data">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'name', width:80}">名称</th>
<th lay-data="{field:'description'}">描述</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="pagination"></div>
```
其中,lay-data属性指定了获取数据的url和分页参数,lay-filter属性指定了表格的过滤器。需要注意的是,在表格中需要指定每一列的属性,以便正确显示数据。
3. 在页面中使用layui的分页组件:
```javascript
layui.use(['laypage', 'table'], function(){
var laypage = layui.laypage;
var table = layui.table;
laypage.render({
elem: 'pagination',
limit: 10,
count: 100,
jump: function(obj, first){
if(!first){
table.reload('data', {
where: {
page: obj.curr,
limit: obj.limit
}
});
}
}
});
});
```
其中,elem属性指定了分页组件的容器,limit属性指定了每页显示的数据量,count属性指定了数据总数。在分页组件的回调函数中,调用table.reload方法重新加载数据表格,并传入当前页和每页显示的数量参数。
这样,就可以在SpringMVC中获取后台数据,并使用layui分页展示数据了。
阅读全文