数据表格分页的设置(服务端分页)

提问 已结 11 1318
冥想盆
冥想盆 2019-5-14
悬赏:80飞吻
版本:layui 浏览器:
数据表格分页对于通过服务端分页table.render里怎么设置一直没搞懂设置的方法,之前用了数据表格的分页但是是调用了全部数据后通过前端方式实现的分页,但现在数据太多了不能用这种方式了,以下有两点疑问待解答(仔细读过文档了)
我之前的方式是通过ajax调用到数据之后然后在ajax的secces回调里做table.render操作,区别于在render里设置url的形式(这是重点,主要是我不太理解url的那种方式)
1.第一次获取数据如何将数据总条数设置到分页上(下图是我的显示和代码)


//ajax的回调
success: function(data) {
if(data.code == '000000') {
$('.fr').html('共有数据:'+ data.body.total +' 条');

layui.use(['table', 'jquery', 'form', 'admin', 'laytpl'], function() {
var table = layui.table,
$ = layui.jquery,
form = layui.form,
admin = layui.admin,
laytpl= layui.laytpl;
table.render({
elem: '#articleList',
cellMinWidth: 80,
cols: [[
{field: 'userId',title: 'ID',fixed: 'left',width: 140,unresize: true},
{field: 'userName',title: '用户名',templet: '#usernameTpl',width: 80},
{field: 'positionType',title: '身份类别',width: 100},
{field: 'positionType1',title: 'positionType1',hide: true},
{field: 'positionType2',title: 'positionType2',hide: true},
{field: 'positionType8',title: 'positionType8',hide: true},
{field: 'status',title: '状态',width: 70},
{field: 'payStatus',title: '缴费状态',width: 100},
{field: 'bindCommodity',templet: '#bindCommodityAll',title: '藏品'},
{field: 'bindMethod',templet: '#bindMethodAll',title: '策略'},
{field: 'validityEnd',title: '有效期至',width: 110},
{field: 'insertTime',title: '注册时间',width: 160},
{field: 'operate',title: '操作',fixed: 'right',toolbar: '#operateTpl',width: 70,unresize: true}
]],
data: data.body.data,//返回的数据
event: true,
count: data.body.total,//数据总条数
page: true,
limit: 15,
limits: [10, 15, 20, 30, 40, 50]

});
/*
*数据表格中form表单元素是动态插入,所以需要更新渲染下
* http://www.layui.com/doc/modules/form.html#render
* */
$(function() {
setTimeout(function(){
table.resize('articleList');
},0)
form.render();
});

});
}
}
页面只显示了当前的15条,并且总页数也是15条而不是1658条。
2.疑问2得是在1解决之后的操作,点分页时拿到当前页和条数我需要在哪个事件里获取点击拿到这两个值?
感谢社区的各位大佬有时间能给解答一下疑惑
回帖
  • @冥想盆 嘿,我看过你的贴了,前边好多回复都看过,以为你搞定了就没回哈哈。
    其实你问的这些文档都有的。
    表格有默认接口返回格式,是长这样的
    {
    "code": 0,
    "msg": "",
    "count": 180,
    "data": {}
    }
    如果后台返回格式不一致又不想改的话,就修改表格接收格式,有个parseData属性

    请求数据如果需要带参就是用where属性,page和limit是源码自动携带的。

    另外这个分页是后台干的活
    1 回复
  • 分页是在后台做的啊。
    0 回复
  • 冥想盆
    2019-5-14
    @恰似你的温柔 这就是后台处理的分页传值start:数据起始位置和count:条数
    0 回复
  • 分页url不需要传总数
    0 回复
  • IDyun
    2019-5-14

    https://www.layui.com/demo/
    接口接收两个参数, 当前页数和 数据量。
    接口返回 总数据量和当前页数据。
    0 回复
  • @冥想盆 返回值格式调一下。
    0 回复
  • 冥想盆
    2019-5-15
    @IDyun 意思是我必须要用他的这种方法调用接口才行是吗?必须用url:‘接口地址’的方式,然后后台的接口附带参数名也要是page和limit,接口里的数据格式也要和给的这个例子数据格式一致才行吗?那如果说我的这个数据接口还有别的参数附带怎么弄?也不能说只携带page和limit两个参数
    0 回复
  • 冥想盆
    2019-5-15
    @IDyun 嗯,传其他参数的方法知道了用这个方法where: {token: 'sasasas', id: 123}
    0 回复
  • 冥想盆
    2019-5-15
    @岁月小偷、@HiTerry @哑巴湖大大水怪 @Zlheb @Asuna 艾特大神,帮忙解答一下疑问
    0 回复
  • Zlheb
    2019-5-15
    其实文档中什么都有,附带其他参数用where,如果返回数据跟预设格式不一致,那么用parseData进行转换

    0 回复