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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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 class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
详解python中eval函数的作用
2019/10/22 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python接口开发实现步骤详解
2020/04/26 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
演讲稿怎么写
2014/01/07 职场文书
民主生活会主持词
2015/07/01 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技