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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
vue2.0 路由模式mode="history"的作用
Oct 18 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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
PHP删除HTMl标签的实现代码
2013/06/30 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
JavaScript实现英语单词题库
2019/12/24 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
终端业务员岗位职责
2013/11/27 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
地道战观后感300字
2015/06/04 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
Python max函数中key的用法及原理解析
2021/06/26 Python
Python3.10的一些新特性原理分析
2021/09/15 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis