layui表格接受list_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 = "失败";

/**

<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于 Spring MVC 和 layui 数据表格AJAX 表格查询实现的示例: 1. 首先,定义一个包含搜索条件的实体类: ``` public class SearchParam { private String name; private Integer age; // 省略 getter 和 setter 方法 } ``` 2. 在控制器中定义处理 AJAX 请求的方法: ``` @Controller @RequestMapping("/user") public class UserController { @RequestMapping("/search") @ResponseBody public Map<String, Object> search(@RequestParam("page") Integer page, @RequestParam("limit") Integer limit, SearchParam searchParam) { // 处理查询逻辑,根据搜索条件查询数据并返回 Map<String, Object> result = new HashMap<>(); // 查询总记录数 int count = userService.getCountBySearchParam(searchParam); // 查询当前页数据 List<User> userList = userService.getListBySearchParam(searchParam, page, limit); result.put("code", 0); result.put("msg", ""); result.put("count", count); result.put("data", userList); return result; } } ``` 3. 在页面中使用 layui 数据表格,并编写 AJAX 请求: ``` <script> layui.use('table', function () { var table = layui.table; table.render({ elem: '#userTable', // 指定原始表格元素选择器(如:#id、.class) url: '/user/search', // AJAX 请求的 URL method: 'post', // 请求方式 page: true, // 开启分页 cols: [[ {field: 'id', title: 'ID', sort: true}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄', sort: true} ]] }); // 监听搜索按钮点击事件 $('#searchBtn').on('click', function () { // 执行搜索操作 table.reload('userTable', { where: { name: $('#name').val(), age: $('#age').val() } }); }); }); </script> ``` 4. 在页面中添加搜索条件输入框和搜索按钮: ``` <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">姓名</label> <div class="layui-input-inline"> <input id="name" class="layui-input" type="text" placeholder="请输入姓名"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">年龄</label> <div class="layui-input-inline"> <input id="age" class="layui-input" type="text" placeholder="请输入年龄"> </div> </div> <div class="layui-inline"> <button id="searchBtn" class="layui-btn">搜索</button> </div> </div> ``` 以上就是一个基于 Spring MVC 和 layui 数据表格AJAX 表格查询实现的示例,具体实现方式可能会因项目需求而有所不同,可根据个人需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值