layui分页怎么弄啊!

提问 未结
3 323
clian
clian 2018-4-16
悬赏:20飞吻
版本:layui 2.2 浏览器:google
分页文档不详细,完全不会用,只会设置总条数。有没有非常详细的例子啊!
回帖
  • laypage 只负责分页本身的逻辑,具体的数据请求与渲染需要另外去完成。我觉得它比较适合异步分页,也就是只是用来发送请求的。
    //执行一个laypage实例
    laypage.render({
    elem: 'page' //选择器ID,不用加#号
    ,count: '数据总数,从服务端得到'
    ,limit: '每页显示条数'
    ,jump: function(obj){
    $.getJSON(
    '请求地址',
    {page:obj.curr,limit:obj.limit,‘额外参数’:参数值},
    function(e){
    $("#ul_list").replaceWith(e.data); //替换页面内容
    }
    )
    }
    });
    服务端分页就可以根据发送的 页数 和 每页显示条数 进行数据相关操作 最后返回所需要的数据,我这里是直接返回了html数据 所以直接替换文本就好了。
    1 回复
  • SiberiA
    2018-4-17
    简短来说,分页只负责逻辑处理,你还需要一个请求返回列表的方法,和一个获取总条数的方法

    请求返回列表的方法,每次传值过去两个参数(每页显示多少条,第几页),通过你的传值条件返回数据,具体写法可参照laypage文档
    获取总条数,在初始化laypage的时候放count里就不用管了
    laypage.render({
    elem: 'page'
    , count: ${listSize} //数据总数,从服务端得到
    , limit: 5
    , skip: true
    , jump: function (obj, first) {
    if (!first) { //如果不是第一页
    var currentIndex = obj.curr;
    $.ajax({
    type: 'post',
    url: '',
    data: {
    pageNum: currentIndex //当前第几页
    limit:5 //每页显示多少条数据
    },
    success: function (data, status) {
    成功之后的操作
    }
    }
    })
    }
    }
    });
    1 回复
  • lay
    2018-4-17
    0 回复