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 相关文章推荐
js 设置缓存及获取设置的缓存
May 08 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
Sea.JS知识总结
May 05 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
清除输入框内的空格
Dec 21 Javascript
canvas实现图像截取功能
Feb 06 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
javascript实现简单打字游戏
Oct 29 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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php提交post数组参数实例分析
2015/12/17 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
简单学习Python time模块
2016/04/29 Python
python逆序打印各位数字的方法
2018/06/25 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
使用Tkinter制作信息提示框
2020/02/18 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
车间班组长岗位职责
2013/11/13 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
企业节能减排实施方案
2014/03/19 职场文书
分公司经理任命书
2014/06/05 职场文书
社保委托书怎么写
2014/08/02 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
MySQL系列之十二 备份与恢复
2021/07/02 MySQL