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 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
vue+element实现打印页面功能
May 20 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 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 mysql索引问题
2008/06/07 PHP
php调整服务器时间的方法
2015/04/03 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JavaScript 继承的实现
2009/07/09 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python实现名片管理系统项目
2019/04/26 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
python安装后的目录在哪里
2020/06/21 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
个人简历自我评价范文
2014/02/04 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
建国大业观后感600字
2015/06/01 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js