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


Posted in Javascript onSeptember 11, 2019

首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致!

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

**需要注意的是layui框架的数据解析格式问题,data必须是个数组对象的形式才能正常解析否则会很麻烦(亲测过非正常解析,手写js手动动态添加表格)

data 格式例如:

{
 "count": 11,
 "code": 0,
 "msg": "",
 "data": [
 {
  "id": "1",
  "money": 20,
  "toptype": "在线",
  "operationtype": "充值",
  "remittanceid": 1,
  "img": "",
  "datetime": "2018-08-01 16:01:09",
  "accountid": "wyp666",
  "statusid": "P05",
  "orderid": "2",
  "userid": "wdm123456",
  "audittime": "2018-07-25 16:02:53",
  "tradingid": "",
  "message": "已审核",
  "ip": ""
 }]
 }

这时候注意分页后台json的参数名称要与框架保持一致,特别是page(当前第几页)和 limit(每页显示条数),这时可以通过框架分页属性来直接设置当前为第几页和每页显示条数不用通过data传递这两个参数到后台了;如果page不传的话会默认为第一页;

例如:

table.render({
   elem: '#detail',
   url : '后台接口',
   method:'请求方式',
   cellMinWidth : 95,
   page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
   layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
    //,curr: 5 //设定初始在第 5 页
    ,groups: 1 //只显示 1 个连续页码
    ,first: false //不显示首页
    ,last: false //不显示尾页
   },
   unresize:false, //禁止拖拽td框,默认为false可拖拽
   limits : [10,15,20,25], //这里设置可选择每页显示条数
   limit : 10, //这里设置的是每页显示多少条
   id : "表格ID",
   cols : [[..........]]

效果图如下:

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

**表格重载(头部搜索功能):通过传入的日期来搜索请求后台查询出数据

//搜索查询
  var active = {
   reload: function(){
    var date_s = $('#date_s').val(); //传入搜索的日期值 
    //执行重载
    table.reload('重载表格id', {
     url : '搜索请求接口',
     method:'请求类型',
     page: {
      curr: 1 //重新从第 1 页开始
     }
     ,where: { //类似于 data
      beginDate:date_s //传入日期参数
     }
    });
   }
  };
  $('#rechar_btn').on('click', function(){
   var type = $(this).data('type');
   //不能为空验证
   if( $('#date_s').val()==""){
    layer.msg('查询起始日期不能为空');
    return false;
   }
   active[type] ? active[type].call(this) : '';
  });

特别要注意的是执行表格重载时,点击的按钮btn最好不要用button或者input(容易入坑)否则点击搜索时页面会刷新,接口会提交两次,把 button 换成 div 就会避免这个问题。

类似于:

<button class="layui-btn" data-type="reload" lay-filter="rechar_btn" id="rechar_btn" >搜索</button>

换成 div

<div class="layui-btn" data-type="reload" lay-filter="rechar_btn" id="rechar_btn" >搜索</div>

最后说一下:分页也支持回调----看文档里的-切换分页的回调

laypage.render({
 elem: 'test1'
 ,count: 70 //数据总数,从服务端得到
 ,jump: function(obj, first){
 //obj包含了当前分页的所有参数,比如:
 console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
 console.log(obj.limit); //得到每页显示的条数
 
 //首次不执行
 if(!first){
  //do something
 }
 }
});

都是项目里遇到的一些小问题,顺手写一笔,如果各位大神不巧看到这里还请大家多多提点意见和建议,大家多多沟通和分享~

以上这篇浅谈layui框架自带分页和表格重载的接口解析问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 #Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 #Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 #Javascript
node-red File读取好保存实例讲解
Sep 11 #Javascript
vue中nextTick用法实例
Sep 11 #Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 #Javascript
如何换个角度使用VUE过滤器详解
Sep 11 #Javascript
You might like
php 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
简单谈谈axios中的get,post方法
2017/06/25 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python编写单元测试代码实例
2020/09/10 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
如何利用cmp命令比较文件
2013/09/23 面试题
为什么要使用servlet
2016/01/17 面试题
自主招生自荐书
2013/11/29 职场文书
房地产出纳岗位职责
2013/12/01 职场文书
销售总经理岗位职责
2014/03/15 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
高三化学教学反思
2016/02/22 职场文书