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新手语法小结
Jun 15 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
js中apply和call的理解与使用方法
Nov 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
php stripslashes和addslashes的区别
2014/02/03 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Python全局变量用法实例分析
2016/07/19 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
使用python实现飞机大战游戏
2020/03/23 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
节约电力资源的建议书
2014/03/12 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2014年保洁工作总结
2014/11/24 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
Redis基本数据类型Set常用操作命令
2022/06/01 Redis