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算法中的排序、数组去重详细概述
Oct 14 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 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生成自己的LOG文件
2006/10/09 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP中常用的魔术方法
2017/04/28 PHP
Javascript调用C#代码
2011/01/17 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
招聘单位介绍信
2014/01/14 职场文书
护士检查书
2014/01/17 职场文书
预防煤气中毒方案
2014/06/16 职场文书
2014年资料员工作总结
2014/11/18 职场文书
军训个人总结
2015/03/03 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2019同学聚会主持词
2019/05/06 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS