PageHelper分页器(包含依赖/layuiTable返回的封装对象)----Java

1.引入依赖

  <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
  <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
  </dependency>
  <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
      <version>1.2.5</version>
  </dependency>
  <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper-spring-boot-starter</artifactId>
      <version>1.2.5</version>
  </dependency>      

2.java代码

   PageHelper.startPage(Integer.valueOf(page),Integer.valueOf(limit));
   List<Map<String,String>> list = infoService.getCountList();
   PageInfo pageInfo = new PageInfo(list);
   return new ReType(pageInfo.getTotal(),pageInfo.getList());

3.为layuiTable提供的实体类

public class ReType implements Serializable{
  /**状态*/
  public int code=0;
  /**状态信息*/
  public String msg="";
  /**数据总数*/
  public long count;

  public List<?> data;

  public ReType() {
  }

  public ReType(long count, List<?> data) {
    this.count = count;
    this.data = data;
  }
}
### 使用 Layui 渲染表格数据的完整方法 Layui 是一个前端框架,其表格组件支持通过 JSON 数据动态渲染表格内容。以下是关于如何使用 Layui 渲染表格数据的详细说明,包括 HTML、JavaScript 和 JSON 数据格式的示例。 #### 1. 基本 HTML 结构 首先需要在 HTML 文件中定义一个容器元素用于承载表格,通常使用 `div` 标签并设置唯一的 `id` 属性。 ```html <div id="demo"></div> ``` #### 2. 引入 Layui 资源文件 确保正确引入 Layui 的 CSS 和 JS 文件。 ```html <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></script> ``` #### 3. JavaScript 初始化表格 通过 `layui.use` 方法加载 `table` 模块,并调用 `render` 方法初始化表格[^2]。 以下是一个完整的 JavaScript 示例: ```javascript layui.use('table', function() { var table = layui.table; // 渲染表格实例 table.render({ elem: '#demo', // 绑定的 DOM 元素 height: 315, // 表格高度 url: '/interfaces/userlist', // 数据接口地址 page: true, // 开启分页功能 request: { // 自定义分页参数名称 pageName: 'page', limitName: 'size' }, response: { // 自定义返回数据结构 statusCode: 0 // 成功状态码 }, cols: [[ // 表头配置 {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}, {field: 'username', title: '用户名', width: 120}, {field: 'sex', title: '性别', width: 80, sort: true}, {field: 'city', title: '城市', width: 150}, {field: 'sign', title: '签名', width: 200}, {field: 'experience', title: '积分', width: 100, sort: true}, {field: 'score', title: '评分', width: 100, sort: true}, {field: 'classify', title: '职业', width: 150}, {field: 'wealth', title: '财富', width: 150, sort: true} ]] }); }); ``` #### 4. 后端返回的 JSON 数据格式 后端接口需要返回符合 Layui 表格组件要求的 JSON 数据格式。标准格式如下: ```json { "code": 0, // 状态码,0 表示成功 "msg": "", // 提示信息 "count": 100, // 数据总数 "data": [ // 数据列表 {"id": 1, "username": "张三", "sex": "男", "city": "北京", "sign": "你好", "experience": 100, "score": 90, "classify": "程序员", "wealth": 10000}, {"id": 2, "username": "李四", "sex": "女", "city": "上海", "sign": "欢迎", "experience": 200, "score": 80, "classify": "设计师", "wealth": 20000} ] } ``` 如果后端返回数据格式与上述标准不一致,可以通过 `response` 参数重新定义返回数据结构[^3]。 #### 5. 动态表头的实现 如果需要动态加载表头信息,可以先通过 AJAX 请求获取表头数据,然后将其传递给 `cols` 配置项[^1]。 ```javascript $(function() { $.ajax({ type: 'get', url: '/interfaces/demo', success: function(data) { test("#demo", data, "/interfaces/userlist"); } }); }); function test(element, data, url) { var table = layui.table; table.render({ elem: element, height: 315, url: url, page: true, cols: [data] }); } ``` 其中,`data` 是从后端返回的动态表头信息,格式为: ```json [ {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}, {field: 'username', title: '用户名', width: 120}, {field: 'sex', title: '性别', width: 80, sort: true}, {field: 'city', title: '城市', width: 150} ] ``` #### 6. 注意事项 - **分页参数**:默认分页参数为 `page` 和 `limit`,如果后端使用的参数名称不同,可以通过 `request` 参数自定义[^3]。 - **数据格式**:后端返回数据必须符合 Layui 表格组件的要求,否则需要通过 `response` 参数调整数据结构。 - **性能优化**:对于大数据量场景,建议开启分页功能以减少单次请求的数据量。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值