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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
地震发生中逃生十大法则
May 12 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
vue实现简单图片上传
Jun 30 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.MVC的模板标签系统(一)
2006/09/05 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
Javascript实现的分页函数
2006/12/22 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
2014自荐信的写作技巧
2014/01/28 职场文书
小学生成长感言
2014/01/30 职场文书
餐饮投资计划书
2014/04/25 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
关于远足的感想
2015/08/10 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python