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 相关文章推荐
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
php 中的str_replace 函数总结
2007/04/27 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python实现图片转字符画的示例
2017/08/22 Python
Python输出各行命令详解
2018/02/01 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
利用python求积分的实例
2019/07/03 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python随机数函数代码实例解析
2020/02/09 Python
python交互模式基础知识点学习
2020/06/18 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
《逃家小兔》教学反思
2014/02/23 职场文书
行政内勤岗位职责
2014/04/07 职场文书
银行授权委托书范本
2014/10/04 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python