浅谈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 : [[..........]]

效果图如下:

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

//搜索查询
  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框架自带分页和表格重载的接口解析问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 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之table中的radio在切换分页时无法记住选中状态的解决方法

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

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

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

  • layui2.0使用table+laypage实现真分页

    前言:最近项目上使用layui做前端页面,发现layui的table本身的分页不能根据屏幕生成每页行数,所以研究了下文档,更改分页 简单解释: 1.最开始是根据屏幕计算加载的每页行数 2.framework可以糊了,由于是老项目还使用了sea.js 3.getUrlParam()是用于其他页面带参数跳转的也可以忽略 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&

  • layUI实现前端分页和后端分页

    本文实例为大家分享了layUI实现前端分页和后端分页效果,供大家参考,具体内容如下 layui后端分页: function pagination(curr,gwayId,mlity,ePart) { $(".manage_ys_list").html('加载中...'); let dd={ conditions: { gatewayId:gwayId, searchText:"", pageSize:15, pageIndex:curr-1 }, identity:

  • layui实现数据分页功能(ajax异步)

    最近项目要使用layUI的分页,看了官方demo感觉还是不太清晰,摸索了一下,现在记录一下. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vendor/layui-v2.4.

  • Layui实现带查询条件的分页

    本文实例为大家分享了Layui实现带查询条件的分页,供大家参考,具体内容如下 这个前端UI框架是真的让人又爱又恨呐!想了很久的方案才行的通 这是全部源码: {include file="../../../application/admin/view/public/head" /} <div class="page-container p10"> <form class="layui-form " method="pos

  • 基于ssm框架实现layui分页效果

    今天完成了基于ssm框架下,layui的分页操作,现在把核心内容分享一下: 1.前端页面的关键代码,基于html5 <!--自动渲染--> <table class="layui-table" lay-data="{cellMinWidth:100, height:'full-500', url:'meter/query', page:true, id:'idTest'}" lay-filter="demo"> <t

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • Python Django实现layui风格+django分页功能的例子

    第一步:首先定义一个视图函数,用于提供数据,实现每页显示数据个数,返回每页请求数据 from django.shortcuts import render from django.core.paginator import Paginator # Django内置分页功能模块 def index(request): # 提供json数据 resp = {"id":10000,"username":"user-0","sex":

随机推荐