layui table数据表格前端分页

下面js代码是在前端进行分页，主要是利用表格插件的parseData参数，该参数触发是在请求数据回来后，但还未显示在表中时触发的。

layui.use('table', function(){var table = layui.table;table.render({elem: '#gridTable' ,url: contextPath + '/pages/json/手工合同.json',method: 'get',request: {limitName: 'rows', //每页数据量的参数名，默认：limitpageName: 'page',},where: {},cols: [columns],response: {statusName: 'result', //数据状态的字段名称，默认：codestatusCode: 200, //成功的状态码，默认：0dataName: 'rows', //数据列表的字段名称，默认：datacountName: 'total',//规定数据总数的字段名称，默认：count},page: true,parseData: function(res){var dataList = res.rows;/* 如果需要前端做模拟查询，可以在此处写，先过滤数据var temp = dataList;dataList = [];for(var i=0; i<temp.length; i++){if(条件1){flag1 = true;}if(条件2){flag2 = true;}if(flag1 && flag2){dataList.push(temp[i]);}} */var total = dataList.length; //请求的数据总数var list = []; //用来保存当前页显示的数据//前端模拟分页，获取当前页、分页显示数据量var page = $("#layui-table-page1").find(".layui-laypage-em").next().html();var limit = $("#layui-table-page1").find(".layui-laypage-limits select").val();console.log(page + ", " + limit);if(page == undefined || page == null || page == ""){page = 1;}if(limit == undefined || limit == null || limit == ""){limit = 10;}//数据从哪条数据开始var start = (page-1) * limit;//数据从哪条数据结束var end = page * limit;if(end > total){end = total;}//取分页数据for(var i=start; i<end; i++){list.push(dataList[i]);}return {"result": 200, //解析接口状态"total": total, //解析数据长度"rows": list //解析数据列表}},});});

layui table数据表格前端分页相关推荐

layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
php如何使用layui.table分页,layui实现数据表格及分页的方法
一.前端部分 html只需要放一个有id的div就行了,方便js获取渲染区域 js部分需要注意url为异步数据接口,done是渲染完表格之后的回调函数table.render({ elem: '#da ...
springboot整合layui实现数据表格的分页操作
第一步,引入依赖文件 <link rel="stylesheet" href="./layui/css/layui.css"> <script ...
layui Table数据表格序号自动增长
一般显示给用户的界面直观就好,像数据的真实id是不应该让用户看到,不合适也不安全,所以一般可以再生成一个自增序列号: 需要使用layui模板引擎: <script type="tex ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
layui table动态选中_layui后台管理—table 数据表格详细讲解
1.layui介绍 layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用,非常适合界面的快速开发.layui区别于那些基于MVVM底 ...
layui数据表格解析html,layui框架table 数据表格的方法级渲染详解
layui框架table 数据表格的方法级渲染详解如下所示: //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {ch ...
layui实现数据表格table的搜索功能
layui根据特定信息对表格进行搜索并显示效果实现 html部分 js部分 Controller层 Mapper层注意总结效果先放效果图此处根据"角色名称"进行搜索, ...
【Layui】数据表格（与后台交互获取数据）
html <table id="userList" lay-filter="userList"></table> js //用户列表 v ...

layui table数据表格前端分页

layui table数据表格前端分页相关推荐

最新文章

热门文章