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清空file文件域的解决方案
Apr 12 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
Javascript的this用法
Jan 16 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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中的超全局变量
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python 全局变量的import机制介绍
2017/09/07 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python字符串Intern机制详解
2019/07/01 Python
浅析python 字典嵌套
2020/09/29 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
七年级音乐教学反思
2014/01/26 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
多媒体教室标语
2014/06/26 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
小学中队委竞选稿
2015/11/20 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Go语言基础map用法及示例详解
2021/11/17 Golang