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

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结果响应

*

*/

@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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。

});

六、效果展示

e69625f085ebfee841a645945c251f88.png

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


版权声明:本文为weixin_35891744原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。