浅谈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 事件属性绑定带参数的函数
Mar 13 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Vue实现购物车功能
Apr 27 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 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 删除数组元素
2009/01/16 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python单元测试实例详解
2018/05/25 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
投资建议书模板
2014/05/12 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
体育教师教学随笔
2015/08/15 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
用Java实现简单计算器功能
2021/07/21 Java/Android