浅谈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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
JS实现简单日历特效
Jan 03 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的access操作类
2008/04/09 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php while循环得到循环次数
2013/10/26 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python实现猜拳游戏项目
2020/11/30 Python
医学专业毕业生个人求职信
2013/12/25 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
二年级数学教学反思
2014/01/21 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
校园标语大全
2014/06/19 职场文书
教师演讲稿开场白
2014/08/25 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
三峡导游词
2015/01/31 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python