layui数据表格,数据可以正常显示,但是上下按钮无法点击。
导致每次都是从1开始查询
分页功能也能正常展示
前端JSP
layui.use('table', function(){
var table = layui.table;
//渲染数据表格
table.render({
id: 'product_table',
elem: '#product_table'
, height: 600
, url: '<%=request.getContextPath() %>/getPr' //数据接口
,page: true
,limit:10
,limits:[10,20]
, cols: [[ //表头
{type: 'checkbox', fixed: 'left'},
// {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
{field: 'id', title: 'ID', hide: true}
, {field: 'title', title: '宝贝名称', width: 300, edit: 'textarea'}
, {field: 'sku', title: 'sku信息', event:'setSign',style:'cursor: pointer;', width: 200, edit: 'textarea'}
, {field: 'cid', title: '所属分类', width: 100, edit: 'textarea'}
, {field: 'mainImg', title: '宝贝主图', width: 700, sort: true, edit: 'textarea'}
, {field: 'price', title: '价格', width: 80, sort: true, edit: 'text'}
, {field: 'isfree', title: '是否收费', width: 50, edit: 'text'}
, {field: 'sales', title: '销量', width: 80, sort: true, edit: 'text'}
, {fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
]]
, parseData: function (res) { //res 即为原始返回的数据
var result;
if(this.page.curr){
result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else{
result=res.data.slice(0,this.limit);
}
console.log(result);
return {
"code": res.code, //解析接口状态
"msg": "", //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
}
, done: function (obj, first) {
//切换分页时候回调事件
console.log(obj);
console.log(first);
if (first != 1) {
//第一次进入不调用
}
}
后端JAva
@RequestMapping("/getPr")
@ResponseBody
public Map<String,Object> getPr(@RequestParam(defaultValue="1")int page,@RequestParam(defaultValue="5")int limit){
PageHelper.startPage(page, limit);
List<Product> productList = productService.showAllProducts();
PageInfo<Product> pageInfo = new PageInfo<Product>(productList);
Map<String,Object> map = new HashMap<String, Object>();
// map.put("produList",productList);
map.put("code",0);
map.put("data",productList);
map.put("count",productList.size());
return map;
}