侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   825

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

一、引入layUI的相关资源

二、html页面代码

搜索表单:

项目搜索:

数据表格:

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

主要注意下:

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结果响应 * */@Datapublic 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异步数据请求不支持自定义返回数据格式的问题
  • layui 给数据表格加序号的方法
  • Layui数据表格之获取表格中所有的数据方法
  • 使用layui 渲染table数据表格的实例代码
  • 对layui数据表格动态cols(字段)动态变化详解
  • layui实现数据表格自定义数据项


  • 上一条:
    layui实现数据分页功能
    下一条:
    layui实现数据分页功能(ajax异步)
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客