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="utf-8"></script>

二、html页面代码

搜索表单:

<div class="layui-row">
 <form class="layui-form layui-col-md12 we-search">
 项目搜索:
 <div class="layui-inline">
  <input type="text" name="projectName" id="projectName" placeholder="项目名称" autocomplete="off" class="layui-input">
 </div>
 <div class="layui-input-inline">
  <select name="businessOperatorId" id="businessOperatorId" lay-verify="" lay-search>
  <option value="">业务员</option>
  </select>
 </div>
 <div class="layui-input-inline">
  <select name="mftRepresentativeId" id="mftRepresentativeId" lay-verify="" lay-search>
  <option value="">厂家代表</option>
  </select>
 </div>
 <div class="layui-input-inline">
  <select name="channelId" id="channelId" lay-search>
  <option value="">渠道</option>
  </select>
 </div>
    <div class="layui-input-inline">
      <select name="customerId" id="customerId" lay-search>
        <option value="">客户</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="projectPhase" id="projectPhase" lay-search>
        <option value="">项目阶段</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="goodsCondition" id="goodsCondition" lay-search>
        <option value="">货物情况</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="implementCondition" id="implementCondition" lay-search>
        <option value="">实施情况</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="payCondition" id="payCondition" lay-search>
        <option value="">收款情况</option>
      </select>
    </div>

 <div class="layui-inline">
  <input class="layui-input" placeholder="开项时间" name="startTime" id="startTime">
 </div>
 <div class="layui-inline">
  <input class="layui-input" placeholder="结项时间" name="endTime" id="endTime">
 </div>
 <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button>
 </form>
</div>

数据表格:

<table class="layui-hide" id="projectList" lay-filter="projectList"></table>

三、后台接收分页参数以及查询条件,获取并返回数据

主要注意下:

page: 前台分页插件传入的当前页数,
limit: 前台分页插件传入的每页个数,
projectInfo :接收前台传入的查询条件的实体
jsonResult :后台返回的相关数据的响应实体

@ResponseBody
  @RequestMapping("/project/list")
  public JsonResult list(@RequestParam("page") Integer page, @RequestParam("limit") Integer size, ProjectInfoEntity projectInfo){

    JsonResult jsonResult = projectService.getProjectList(page,size,projectInfo);
    return jsonResult;
  }

后台响应类必须包含code与count字段,因为前台layui会自动获取

自定义后台数据响应实体 JsonResult:

package com.bhy702.jfkj.common.util;

/**
 * JSON结果响应
 *
 */
@Data
public class JsonResult {

  private static final String SUCCESS = "成功";
  private static final String ERROR = "失败";

  /**
   * 响应状态code,因为前台layui默认0为响应成功,所以此处默认为0
   */
  private Integer code = 0;

  /**
   * 数据总条数
   */
  private Long count = 0L;

 /**
   * 返回是否成功
   */
  private Boolean result = false;

  /**
   * 返回提示信息
   */
  private String msg = "";

  /**
   * 返回数据信息
   */
  private Object data;

  private JsonResult() {
  }

  /**
   * 成功的响应
   *
   * @return
   */
  public static JsonResult success() {
    return result(true, SUCCESS, null,null);
  }

  public static JsonResult success(String msg) {
    return result(true, msg, null,null);
  }

  public static JsonResult success(Object data) {
    return result(true, SUCCESS, data,null);
  }
  public static JsonResult success(Object data,Long count) {
    return result(true, SUCCESS, data,count);
  }

  public static JsonResult success(String msg, Object data) {
    return result(true, msg, data,null);
  }

  public static JsonResult success(String msg, Object data,Long count) {
    return result(true, msg, data,count);
  }

  /**
   * 失败的响应
   *
   * @return
   */
  public static JsonResult error() {
    return result(false, ERROR, null,null);
  }

  public static JsonResult error(String msg) {
    return result(false, msg, null,null);
  }

  public static JsonResult error(Object data) {
    return result(false, ERROR, data,null);
  }

  public static JsonResult error(Object data,Long count) {
    return result(false, ERROR, data,count);
  }

  public static JsonResult error(String msg, Object data) {
    return result(false, msg, data,null);
  }

  public static JsonResult error(String msg, Object data,Long count) {
    return result(false, msg, data,count);
  }

  public static JsonResult result(Boolean result, String msg, Object data,Long count) {
    JsonResult jsonResult = new JsonResult();
    jsonResult.setResult(result);
    jsonResult.setMsg(msg);
    jsonResult.setData(data);
    jsonResult.setCount(count);
    return jsonResult;
  }
}

四、渲染table表格数据

主要注意下:

elem: ‘#projectList': projectList为表格id,
page: true: 设置表格分页,
url: ‘/project/list' :数据请求url
fixed: true:固定列
done : function(res, curr, count){…}:数据加载成功后的回调函数

var tableIns = table.render({
 elem: '#projectList',
 cellMinWidth: 150,
 url: '/project/list',
 cols: [
  [{
  // type: 'checkbox',fixed: 'left'
        checkbox: true, fixed: true
  }, {
  field: 'id',title: 'ID',align:'center',width:50,fixed: true
  }, {
  field: 'name',title: '项目名称',align:'center',fixed: true
  }, {
  field: 'businessOperatorStr',title: '经办人',align:'center',fixed: true
  }, {
  field: 'mftRepresentativeStr',title: '厂家代表',align:'center',fixed: true
  }, {
  field: 'channelStr',title: '渠道',align:'center',fixed: true
  }, {
  field: 'customerStr',title: '客户',align:'center',fixed: true
  }, {
        field: 'projectPhaseStr',title: '项目阶段',align:'center',fixed: true
  }, {
  field: 'amount',title: '金额',align:'center'
  }, {
  field: 'businessSource',title: '商机来源',align:'center'
  }, {
   field: 'mainProduct',title: '主要产品',align:'center'
  }, {
   field: 'productLineStr',title: '产品线',align:'center'
  }, {
   field: 'goodsConditionStr',title: '货物情况',align:'center'
  }, {
   field: 'implementConditionStr',title: '实施情况',align:'center'
  }, {
        field: 'payAmount',title: '已付金额',align:'center'
      }, {
   field: 'payConditionStr',title: '收款情况',align:'center'
  }, {
   field: 'startTime',title: '开项时间',align:'center'
      }, {
   field: 'endTime',title: '结项时间',align:'center'
      }, {
   field: 'remark',title: '备注',align:'center'
  }, {
   field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true
  }]
 ],
 id: 'testReload',
 // skin: 'row', //表格风格
 even: true, //隔行背景
 event: true,
 page: true,
    done : function(res, curr, count){
      $('#totalProjectNumber').text("共有数据:"+count+" 条");
      table_data=res.data;
      layer.closeAll('loading');
      // layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
      // layer.close(index);  //返回数据关闭loading
    }
 });

五、监听搜索表单的提交事件,并重新渲染table表格数据

主要注意下:

sreach: 为搜索按钮的lay-filter=“sreach”,
where 中的数据对应搜索表单,为搜索的条件,后台使用这些条件进行筛选数据返回

form.on('submit(sreach)', function(data){

   layer.load();
    tableIns.reload({
  url:"/project/list",
  page: {
        curr: 1 //重新从第 1 页开始
      },
  where:{
  name:data.field.projectName,
        businessOperatorId:data.field.businessOperatorId,
  mftRepresentativeId:data.field.mftRepresentativeId,
  channelId:data.field.channelId,
        customerId:data.field.customerId,
        projectPhase:data.field.projectPhase,
        goodsCondition:data.field.goodsCondition,
        implementCondition:data.field.implementCondition,
        payCondition:data.field.payCondition,
        startTime:data.field.startTime,
        endTime:data.field.endTime
  }
    });

    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
  });

六、效果展示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

  • 基于LayUI分页和LayUI laypage分页的使用示例

    本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图:  一.引用js依赖 主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m

  • 深入理解jQuery layui分页控件的使用

    $.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d

  • layui实现动态和静态分页

    开发管理后台是每一个开发人员都要熟悉的一个环节,作为后端程序员,公司的所有机密数据都掌握在我们手上,所以这个时候,如果不是公司的核心成员,是不能接触到某些数据的,这个时候所有的工作都落到了我们的手上,从PS到Linux都需要我们亲历亲为,还好发现了layui这个前端框架,很大程度上减轻了我们的压力. 今天我们先来学习一下layui实现动态数据表,静态数据表,以及表格的分页,其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能,这个静态分页同样适用在信息类网站,我的工作开发环境是debia

  • 基于LayUI实现前端分页功能的方法

    一.LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为http://www.layui.com/,下载后引入项目中. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="exte

  • layui分页效果实现代码

    本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css" > </head> <body

  • layui实现数据分页功能

    本文实例为大家分享了layui实现数据分页功能,供大家参考,具体内容如下 官网layui table演示页面 示例截图: 页面引入layui.css. layui.js <div id="pTable" style="width: 1200px;"> <table class="layui-table" id="layui_table_id" lay-filter="test"> &

  • 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使用数据表格实现购物车功能

    本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>layui数据表格实现类购物车功能</title> <link rel="stylesheet" type="

  • layui实现数据表格自定义数据项

    layui是一个很适合后台开发人员用的一个前端框架,界面简洁,功能丰富. 大家知道,系统一般都有数据表格及分页功能,尤其在后台管理系统之类,这类场景更是很多,layui也为我们提供了对应的支持,我这里要说的是,layui对异步返回的数据默认是有一套格式的,像下面这样 { code: 0, msg: "", count: 1000, data: [] } 字段的别名我们可以通过属性去配置,详情请参考layui官方文档 重点来啦,layui默认支持一级数据结果,像下面这种服务端返回的数据结

  • layui的数据表格+springmvc实现搜索功能的例子

    如下所示: 主要在前端页面加: <div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"> </div> <span class=&

  • 关于Ajax异步请求后台数据进行动态分页功能

    ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据.数据总条数.总页数.当前页数,其中前三条可在后台获取,对于当前页数,需要从前端获取点击页数再通过请求传递给后台,后台做完相应处理后再传回给前端. 请看如下例子: /** * * @param page 当前页 */ function getData(page){ var schoolid = $("#schoolid option:selecte

  • Layui实现数据表格默认全部显示(不要分页)

    啥也不说了,上段代码吧 table.render({ elem: '#check-data-list' , height: 480 , title: '监测任务列表信息' , limit: Number.MAX_VALUE // 数据表格默认全部显示 , cols: [[ {field: 'id', title: '序号', width: 60, style: 'font-size: 12px; color: #666'}, {field: 'modelNum', title: '任务编号',

  • layui实现数据表格点击搜索功能

    本文实例为大家分享了layui实现数据表格点击搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>更正地址</title> <style> </style> <link rel="stylesheet" href=&q

  • 解决layui数据表格table的横向滚动条显示问题

    加上这段样式代码就可以解决了: <link type="text/css" rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" /> <style> body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ </style> ps:这个问题fly社区给出的解释是:table 列

  • layui数据表格 table.render 报错的解决方法

    一.报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal Server Error, status=500). An error happened during temp

  • vuejs实现本地数据的筛选分页功能思路详解

    今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进行数据筛选,实现自动分页,自动生成页数,点击自动跳转 项目代码:js代码 var subList=new Vue({ el:'#main', data:{ // subcontentData为本地数据 subContents:subcontentData, // 页面需要展现的数据 yemianda

随机推荐