layui实现数据表格table分页功能(ajax异步)


Posted in Javascript onJuly 27, 2019

layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。

一、引入layUI的相关资源

<link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" >
<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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
 });

六、效果展示

layui实现数据表格table分页功能(ajax异步)

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

Javascript 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
json 定义
Jun 10 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
JSONObject使用方法详解
Dec 17 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
JS中Attr的用法详解
Oct 09 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
layui实现数据分页功能
Jul 27 #Javascript
layUI实现列表查询功能
Jul 27 #Javascript
Layui实现带查询条件的分页
Jul 27 #Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 #Javascript
layui表格数据重载
Jul 27 #Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
微信小程序 如何获取网络状态
Jul 26 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
中英文字符串翻转函数
2008/12/09 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Django中使用Celery的方法示例
2018/11/29 Python
python执行精确的小数计算方法
2019/01/21 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
中学生获奖感言
2014/02/04 职场文书
上班打牌检讨书
2014/02/07 职场文书
大学课外活动总结
2014/07/09 职场文书
学生安全责任书模板
2014/07/25 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
交通事故委托书范本
2014/09/28 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
班主任工作实习计划
2015/01/16 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python