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 处理网页内容的实现代码
Feb 15 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
js的2种继承方式详解
Mar 04 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
Vue项目打包编译优化方案
Sep 16 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
php生成微信红包数组的方法
2019/09/05 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
JavaScript 基本概念
2015/01/20 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
基于pip install django失败时的解决方法
2018/06/12 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python实现飞机大战小游戏
2019/11/08 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
python接入支付宝的实例操作
2020/07/20 Python
python openssl模块安装及用法
2020/12/06 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
会计工作心得体会
2014/01/13 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
应届生求职信范文
2014/05/26 职场文书
聘任书范文大全
2015/09/21 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server
MYSQL如何查看操作日志详解
2022/05/30 MySQL