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 相关文章推荐
JS拖拽插件实现步骤
Aug 03 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
javascript实现点亮灯泡特效示例
Oct 15 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
php集成动态口令认证
2016/07/21 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python数据可视化图实现过程详解
2020/06/12 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
生物制药专业自我鉴定
2014/02/19 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
同学会感言
2015/07/30 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python