普通网友 2022-08-28 08:47 采纳率: 55.6%
浏览 102
已结题

layui表格无法点击上一页和下一页

layui数据表格,数据可以正常显示,但是上下按钮无法点击。
导致每次都是从1开始查询

img

分页功能也能正常展示

img


img

img

前端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;
    }
  • 写回答

2条回答 默认 最新

  • Z_pigeon 2022-08-28 10:29
    关注

    接口返回的count值是不是只有10,如果数据总和只有10条,然后每页限制limit也是10,那组件会动态计算只显示可操作的1页(所以下箭头会disabled不可操作,因为你没有第11条数据了),如果你count是11,那就可以操作下一页

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 9月5日
  • 已采纳回答 8月28日
  • 创建了问题 8月28日