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中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
js逆向解密之网络爬虫
May 30 Javascript
微信小程序获取当前位置和城市名
Nov 13 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
Javascript实现单例模式
2016/01/24 Javascript
js微信分享API
2020/10/11 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
文秘专业个人求职信
2013/12/22 职场文书
导游词之天津盘山
2019/11/01 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS