layui新手,关于table limit无效的问题!

提问 已结
11 161
wei_wei
wei_wei 2019-3-15
悬赏:20飞吻
版本:layui 2.4.5 浏览器:搜狗
大家好!我是layui的新手。我看layui的文档一段时间了,现在想用table展示我的表格数据,我按照官网的例子,将其中的html拷贝到我的程序,然后把url换成了一个json,然后将limit改成了5,其它代码不变。现在数据可以正常显示,但是是全部显示,而不是每页显示5行,不知道为什么。另外,点击分页,可以看到页面有刷新,但是最终显示的不是指定页的数据,依然是全部的数据,请大家帮我看看,谢谢了!

下面是源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo'
, height: 420
, url: '/json/demo.json' //数据接口
, title: '用户表'
, page: true //开启分页
, limit: 5
, toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
, totalRow: true //开启合计行
, cols: [[ //表头
{ type: 'checkbox', fixed: 'left' }
, { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计:' }
, { field: 'username', title: '用户名', width: 80 }
, { field: 'experience', title: '积分', width: 90, sort: true, totalRow: true }
, { field: 'sex', title: '性别', width: 80, sort: true }
, { field: 'score', title: '评分', width: 80, sort: true, totalRow: true }
, { field: 'city', title: '城市', width: 150 }
, { field: 'sign', title: '签名', width: 200 }
, { field: 'classify', title: '职业', width: 100 }
, { field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true }
, { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }
]]
});

//监听头工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id)
, data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'add':
layer.msg('添加');
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择一行');
} else if (data.length > 1) {
layer.msg('只能同时编辑一个');
} else {
layer.alert('编辑 [id]:' + checkStatus.data[0].id);
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('请选择一行');
} else {
layer.msg('删除');
}
break;
};
});

//监听行工具事件
table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
layer.msg('查看操作');
} else if (layEvent === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del(); //删除对应行(tr)的DOM结构
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') {
layer.msg('编辑操作');
}
});


});
</script>
</body>
</html>
回帖
  • @wei_wei 不是,limit是有用的用来跟接口沟通,告诉后台每页显示的条数,当然关键看你的服务端有没有做相应的处理,比如你写一个json文件,你让这个json文件接收这个limit给你处理试试~看他能否说给你返回你要的某一页的记录,url的page就是服务端分页,你返回多少数据他就显示多少,都认为是当前页的数据,不会出现说组件检测到你返回的是所有的数据,然后还再给你做一次前端分页,这就从根上违背了服务端分页了,更何况他要怎么知道你返回的是当前页的数据还是所有的数据,所以要用url page就得严格按照服务端分页来;url和data不能共用,如果config里面有data和url,data属性会被完全忽视,你如果想要的是一次性查出所有的数据,然后进行前台分页,那么不要用url的形式,而是自行先用ajax请求接口得到你要的数据作为table的data去渲染出来
    1 回复
  • 一楼说对了一小部分,limit设置了,也要看你的limits是否支持,里面是否有对应的选项;但是不是你这个问题的关键,关键是设置url就是异步请求数据,他只认你返回的data为当前页的数据,如果你设置成一个json文件,关键就看你返回的data要是当前页的数据而不是想着返回所有的数据让前端给你分页,要前端分页得自己请求接口然后用data模式,url模式只认服务端分页,
    1 回复
  • Freedom丶
    2019-3-15
    是limits 不是limt,后面是数组 [5],改好记得采纳
    0 回复
  • 要后台动态获取数据时,跟据传送的当前页和和每页行数,再返回本次要显示的数据,才可以实现分页吧
    0 回复
  • limit要同事配合limits使用。limit表示默认分页条数(但是这个条数必须是limits里面的),默认的limits 没有5 所有
    你要这么写
    table.render({
    elem: '#demo'
    , height: 420
    , url: '/json/demo.json' //数据接口
    , title: '用户表'
    , page: true //开启分页
    , limit: 5,
    limits:[5,10,…]
    …})
    0 回复
  • 0 回复
  • wei_wei
    2019-3-15
    谢谢各位的回复,我之前加了limits,刚才贴出来的是删掉的,我刚才又增加了limits:[5,10],依然不行。

    代码修改为:
    layui.use('table', function(){
    var table = layui.table;
    table.render({
    elem: '#demo'
    , height: 420
    , url: '/json/demo.json' //数据接口
    , title: '用户表'
    , page: true //开启分页
    , limit: 5
    , limits:[5,10]
    , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    , totalRow: true //开启合计行
    , cols: [[ //表头
    { type: 'checkbox', fixed: 'left' }
    , { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计:' }
    , { field: 'username', title: '用户名', width: 80 }
    , { field: 'experience', title: '积分', width: 90, sort: true, totalRow: true }
    , { field: 'sex', title: '性别', width: 80, sort: true }
    , { field: 'score', title: '评分', width: 80, sort: true, totalRow: true }
    , { field: 'city', title: '城市', width: 150 }
    , { field: 'sign', title: '签名', width: 200 }
    , { field: 'classify', title: '职业', width: 100 }
    , { field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true }
    , { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }
    ]]
    });
    0 回复
  • wei_wei
    2019-3-15
    @岁月小偷 明白您的意思了!您是说url方式返回多少数据,就显示多少数据,对吗?即使设置了limit也无效。如果url返回的数据条数是全部的,那么需要自己重新筛选出想要的,然后用data模式传递,是吗?如果我的理解是对的,那么url和data可以同时使用吗?谢谢您的回复!!
    0 回复
  • wei_wei
    2019-3-15
    @岁月小偷 好的,谢谢了!!我也是怀疑url的问题,您解释之后就更清楚了!感谢感谢!!
    0 回复
  • 前端分页采用data,不使用url,data是对已知数据机进行分页,url是请求后台地址的后台分页模式
    0 回复