layui分页使用

512 阅读1分钟

前端

table.render({
    elem: '#content'
    , url: '/HomeworkController/studentSubmitHomework' //数据接口
    , toolbar: '#toolbarDemo'
    
    , cols: [[//标题
        {type: 'checkbox', width: 150}
        , {field: 'id', title: 'ID', width: 120,}
        , {field: 'filename', title: '文件名字', width: 150,}
        , {field: 'url', title: '文件路径', width: 150,}
        , {field: 'uploaduser', title: '上传用户', width: 150,}
        , {field: 'acceptuser', title: '发布用户', width: 220,}
        , {field: 'coursename', title: '课程名称', width: 200,}
        , {field: 'stopdate', title: '截止时间', width: 200,}
        , {field: 'classname', title: '班级名称', width: 300,}
        , {field: 'time', title: '发布时间', width: 300,}
        , {fixed: 'right', title: '操作', width: 200, toolbar: '#BarContent1'}
    ]]//以下是和分页有关的
    ,page:true
    , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    , jump: function (obj, first) {
        //obj包含了当前分页的所有参数,比如:
        console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数
        //首次不执行
        if (!first) {
            //do something
            var href = '&pageNum=' + obj.curr;
            href += '&pageSize=' + obj.limit;
            console.log(href)
            location.href = href;
        }

    }
})

controller

//获取所有学生上交作业的记录
@RequestMapping("/studentSubmitHomework")
public Object studentSubmitHomework(@RequestParam("page") int page,
                                    @RequestParam("limit") int limit){
    List<Filemanage> list = filemanageService.queryAllInfo();
    //查询的数据总数
    int count=list.size();
    //从第几行开始
    int pages=(page-1)*limit;
    int ss=0;
    //pages+limit:查到第几行,如果总数大于他俩之和,就直接让ss=pages+limit;
    //如果不是,则让ss直接等于数据总数开始就行
    if(count>pages+limit)
    {
        ss=pages+limit;
    }
    else {
        ss=count;
    }
    Map<String, Object> result = new HashMap<String, Object>();
    //list的选择性查询 sublist的第一参数是从多少开始,第二个参数是查到多少
    List<Filemanage> data=list.subList(pages,ss);
    result.put("code", 0);
    result.put("msg", "");
    result.put("count", count);
    result.put("data", data);
    // 将其转换为JSON数据,并压入值栈返回
    return result;
}

最终效果