使用layui怎么实现数据表格table分页功能

这篇文章给大家介绍使用layui怎么实现数据表格table分页功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

我们提供的服务有：成都网站制作、网站建设、外贸网站建设、微信公众号开发、网站优化、网站认证、嘉善ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的嘉善网站制作公司

一、引入layUI的相关资源

二、html页面代码

搜索表单：


 
 项目搜索：

业务员

厂家代表

渠道

@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; }

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; } }

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是什么

layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。

关于使用layui怎么实现数据表格table分页功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

http://hbruida.cn/article/pjsdhs.html

使用layui怎么实现数据表格table分页功能

layui是什么

其他资讯