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 浏览器判断实现函数
Aug 20 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 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
配置支持SSI
2006/11/25 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
javascript编写简易计算器
2017/05/06 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
python生成IP段的方法
2015/07/07 Python
快速了解Python相对导入
2018/01/12 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
python读取xml文件方法解析
2020/08/04 Python
python实现控制台输出颜色
2021/03/02 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
小班评语大全
2014/05/04 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
5s标语大全
2014/06/23 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书