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 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
实现无刷新联动例子汇总
May 20 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
js时间控件只显示年月
Jan 08 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
vue+canvas实现拼图小游戏
Sep 18 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删除左端与右端空格的方法
2014/11/29 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
flask中过滤器的使用详解
2018/08/01 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
高等教育学自荐书范文
2014/02/10 职场文书
股东合作协议书
2014/04/14 职场文书
青春演讲稿范文
2014/05/08 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
个人委托书怎么写
2014/09/17 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
医生辞职信范文
2015/03/02 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Mysql 如何批量插入数据
2021/04/06 MySQL
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Golang 并发下的问题定位及解决方案
2022/03/16 Golang