Layui实现数据表格默认全部显示(不要分页)

啥也不说了，上段代码吧

table.render({
   elem: '#check-data-list'
   , height: 480
   , title: '监测任务列表信息'
   , limit: Number.MAX_VALUE // 数据表格默认全部显示
   , cols: [[
    {field: 'id', title: '序号', width: 60, style: 'font-size: 12px; color: #666'},
    {field: 'modelNum', title: '任务编号', style: 'font-size: 12px; color: #666'},
    {field: 'monitoringTime', title: '监测时间', style: 'font-size: 12px; color: #666'},
    {field: 'taskStatus', title: '任务状态', templet: "#status", style: 'font-size: 12px; color: #666'},
    {field: 'overTime', title: '结束时间', templet: "#over", style: 'font-size: 12px; color: #666'},
    {
     field: 'report',
     title: '报告',
     event: 'viewReport',
     width: 60,
     templet: "#reportID",
     style: 'font-size: 12px; color: #3A87F3; cursor:pointer'
    }
   ]]
   , cellMaxWidth: 100
   , parseData: function (res) {
    return res;
   }
   , data: data
   , id: 'check-data-list'
  });

以上这篇Layui实现数据表格默认全部显示(不要分页)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈layui框架自带分页和表格重载的接口解析问题

    首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致! **需要注意的是layui框架的数据解析格式问题,data必须是个数组对象的形式才能正常解析否则会很麻烦(亲测过非正常解析,手写js手动动态添加表格) data 格式例如: { "count": 11, "code": 0, "msg": "", "data": [ { "id": "1", &qu

  • php+layui数据表格实现数据分页渲染代码

    一.HTML <table class="layui-hide layui-table" id="spu-data"></table> 二.JS 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等 <!-- 拼接图片 --> <script type="text/html" id="pimg"> <img class=

  • layui+jquery支持IE8的表格分页方法

    工具(框架.插件) 1.layui-v1.0.9 2.jquery-1.8.3 代码 1.jsp代码(可忽略jsp部分,转成html) <%@ page language="java" contentType="text/html; charset=utf-8"%> <%@ include file="/common/include/taglib.jsp"%> <% <html> <head>

  • thinkphp5+layui实现的分页样式示例

    thinkphp5+layui实现的分页样式示例

    本文实例讲述了thinkphp5+layui实现的分页样式.分享给大家供大家参考,具体如下: tp5之layui分页样式 1.分页类 路径:\thinkphp\library\think\paginator\driver Layui.php <?php namespace think\paginator\driver; use think\Paginator; class Layui extends Paginator { /** * 上一页按钮 * @param string $text *

  • Layui之table中的radio在切换分页时无法记住选中状态的解决方法

    情景描述 Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页.上一页.跳转按钮进行切换另外一个页面,然后在切换回之前的页面,会发现在以前页面上radio状态全部恢复默认了,我们当然是希望能保存住前一页radio的选中状态. 我写项目遇到的一个的情况:在第一页选中的radio的状态,点击下一页按钮切换到第二页,然后再点击上一页切换会第一页,第一页中的radio状态就恢复

  • 浅谈layui分页控件field参数接收对象的问题

    第一次使用layui分页控件,遇到的问题..field: 'type.typeName' 获取不到值. 页面代码 table.render({ elem: '#bookTable' ,height: 'full-20' ,url: '/admin/getBook' //数据接口 ,request: { pageName: 'begin' //页码的参数名称,默认:page ,limitName: 'length' //每页数据量的参数名,默认:limit } ,page: true //开启分页

  • layui表格分页 记录勾选的实例

    layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作.然后需要一个全局变量记录所有已经勾选的项 .下面是自己的代码 . 首先,监听表格的复选框点击事件 , 将单选或全选全部记录下来 var checkArray = new Array(); // 当前页数据 var currentArray ; //监听行单击事件(单击事件为:rowDouble) table.on('checkbox(test)', functio

  • layui table 获取分页 limit的方法

    如下所示: var table_name = table.render({ }); page_size = table_name.config.limit; table_name 是自定义变量 以上这篇layui table 获取分页 limit的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下: 1.HTML 搜索输入框 <form class="layui-form"> <div class="layui-input-inlin

  • Layui实现数据表格默认全部显示(不要分页)

    啥也不说了,上段代码吧 table.render({ elem: '#check-data-list' , height: 480 , title: '监测任务列表信息' , limit: Number.MAX_VALUE // 数据表格默认全部显示 , cols: [[ {field: 'id', title: '序号', width: 60, style: 'font-size: 12px; color: #666'}, {field: 'modelNum', title: '任务编号',

  • Layui给数据表格动态添加一行并跳转到添加行所在页的方法

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

  • Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

    如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/partyMember/getPartyMembersByOrgCode', //width : 1500, height : 'full', cols : [ [ //标题栏 {checkbox : true,LAY_CHECKED : false,filter : 'test'},

  • layui实现数据表格点击搜索功能

    layui实现数据表格点击搜索功能

    本文实例为大家分享了layui实现数据表格点击搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>更正地址</title> <style> </style> <link rel="stylesheet" href=&q

  • layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • layui的数据表格+springmvc实现搜索功能的例子

    如下所示: 主要在前端页面加: <div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"> </div> <span class=&

  • layui实现数据表格自定义数据项

    layui是一个很适合后台开发人员用的一个前端框架,界面简洁,功能丰富. 大家知道,系统一般都有数据表格及分页功能,尤其在后台管理系统之类,这类场景更是很多,layui也为我们提供了对应的支持,我这里要说的是,layui对异步返回的数据默认是有一套格式的,像下面这样 { code: 0, msg: "", count: 1000, data: [] } 字段的别名我们可以通过属性去配置,详情请参考layui官方文档 重点来啦,layui默认支持一级数据结果,像下面这种服务端返回的数据结

  • layui实现数据表格隐藏列的示例

    在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性. table.render({ elem: '#test' ,url:'${pageContext.request.contextPath}/findcustomers' ,cols: [[ {align:'center', title: '编号', sort: true,type:'numbers',width:100} ]] ,page: true }); 我们就会获得一

  • layui使用数据表格实现购物车功能

    本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>layui数据表格实现类购物车功能</title> <link rel="stylesheet" type="

  • 转换layUI的数据表格中的日期格式方法

    转换layUI的数据表格中的日期格式 前端jsp代码 <table class="layui-table" style="width:100%" lay-data="{url:'/why123/user/findUserAll?userType=0', page:true, id:'idTest'}" lay-filter="demo"> <thead> <tr> <th lay-da

随机推荐