layui问题之渲染数据表格时,仅出现10条数据的解决方法


Posted in Javascript onSeptember 12, 2019

一、问题

ajax获取服务端数据之后,要动态渲染table,但数据仅仅数显了10条,并没有渲染所有的数据。

二、经过

看一下表格需要的数据,0-9条的数据都自动有一个名为LAY_TABLE_INDEX的键值对,但10条及之后的数据都没有这个键值对。

很是纳闷,这个表格不带分页功能,应该不需要写limit对数据进行限制

table.render({
    elem: '#orderTable'
    ,height: 400
    ,cols: [[ //标题栏
     {field: 'status', title: "订单状态", width: 90}
     ,{field: 'orderSerialNumber', title: "订单编号", minWidth: 150}
     ,{field: 'logisticsSerialNumber', title: "物流串号", minWidth: 150}
     ,{field: 'curPos', title: "当前位置", minWidth: 150}
     ,{field: 'monitoringState', title: "监控状况", width: 140}
     ,{field: 'lastUpdated', title: "更新时间", width: 145, sort: true}
     ,{field: 'operating', title: "操作", minWidth: 220}
    ]]
    ,data: handleData
    ,even: true
   });

三、结果

看到官网上写:limit 参数(默认:10)是与你服务端限定的数据条数一致。就把limit加上去了,并且和服务端数据条数一致。

table.render({
    elem: '#orderTable'
    ,height: 400
    ,cols: [[ //标题栏
     {field: 'status', title: "订单状态", width: 90}
     ,{field: 'orderSerialNumber', title: "订单编号", minWidth: 150}
     ,{field: 'logisticsSerialNumber', title: "物流串号", minWidth: 150}
     ,{field: 'curPos', title: "当前位置", minWidth: 150}
     ,{field: 'monitoringState', title: "监控状况", width: 140}
     ,{field: 'lastUpdated', title: "更新时间", width: 145, sort: true}
     ,{field: 'operating', title: "操作", minWidth: 220}
    ]]
    ,data: handleData
    ,even: true
    ,limit: limit //显示的数量
   });

注:handleData是渲染表格时,表格需要的数据

以上这篇layui问题之渲染数据表格时,仅出现10条数据的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
JS字符串处理实例代码
Aug 05 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 #Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 #Javascript
JS计算斐波拉切代码实例
Sep 12 #Javascript
VUE项目初建和常见问题总结
Sep 12 #Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 #Javascript
深入浅析vue中cross-env的使用
Sep 12 #Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 #Javascript
You might like
escape unescape的php下的实现方法
2007/04/27 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
python使用Matplotlib画饼图
2018/09/25 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python内存管理机制原理详解
2019/08/12 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python 没有main函数的原因
2020/07/10 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
如何查看python关键字
2021/01/17 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
大一学生的职业生涯规划书范文
2014/01/19 职场文书
十一酒店活动方案
2014/02/20 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
初中家长评语和期望
2014/12/26 职场文书
民政工作个人总结
2015/02/28 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android