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 播放器 控制
Jan 22 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
js中的闭包实例展示
Nov 01 Javascript
个人小程序接入支付解决方案
May 23 Javascript
JS实现普通轮播图特效
Jan 01 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
文件上传程序的全部源码
2006/10/09 PHP
PHP 模板高级篇总结
2006/12/21 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
JS array数组检测方式解析
2020/05/19 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Python做文本按行去重的实现方法
2016/10/19 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
keras的三种模型实现与区别说明
2020/07/03 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
参观接待方案
2014/03/17 职场文书
倡议书格式
2014/04/14 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
单位租房协议书样本
2014/10/30 职场文书
统招统分证明
2015/06/23 职场文书
三八节活动简报
2015/07/20 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS