Ajax分页插件Pagination从前台jQuery到后端java总结-Java开发

我来为你分享“Ajax分页插件Pagination从前台jQuery到后端java总结”的完整攻略。

我来为你分享“Ajax分页插件Pagination从前台jQuery到后端java总结”的完整攻略。

1. 背景

在网站中，有些内容需要分页展示，这时候就需要使用Ajax分页插件。本文将介绍一种从前台jQuery到后端Java的分页插件实现。

2. 插件介绍

这里介绍一个比较常用的jQuery分页插件——Pagination。它简单易用，可以很容易地被集成到Web应用程序中。

3. 前台实现

3.1 引入jQuery和Pagination插件

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入Pagination插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-pagination/1.2.7/jquery.pagination.min.js"></script>

3.2 页面布局

首先需要在页面中添加一个 <table> 标签，用于展示分页数据。同时也需要为分页控件添加一个容器 <div>。

<!-- 分页控件容器 -->
<div id="pagination"></div>
<!-- 分页数据展示表格 -->
<table id="data-table">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>工作</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

3.3 分页配置及初始化

下面是使用Pagination插件的JS代码，具体注释在代码中。

// 分页配置项
var option={
    pageNumber:1, // 第几页
    pageSize:10, // 每页显示的记录数
    pageList: [10, 20, 30], // 可供选择的每页显示的记录数
    ajax: { // 使用ajax请求分页
        url: "/getData", // 请求数据的url地址
        type: "post", // 请求方式
        data: { // 请求参数
            pageNumber: function () {
              return option.pageNumber;
            },
            pageSize: function () {
              return option.pageSize;
            }
        },
        dataType: 'json', // 返回的数据格式
        success:function(data){ // 返回数据成功后的回调函数
            if(data && data.code==200){ // 请求成功
                var currentPage=option.pageNumber;
                var pageSize=option.pageSize;
                var totalCount=data.data.totalCount; // 数据总数
                var totalPages=Math.ceil(totalCount / pageSize); // 计算总页数
                var list=data.data.list; // 当前页数据列表
                var tableHtml=""; // 拼接表格内容字符串
                for(var i=0,len=list.length;i<len;i++){
                    var row=list[i];
                    tableHtml+="<tr>";
                    tableHtml+="<td>"+row.id+"</td>";
                    tableHtml+="<td>"+row.name+"</td>";
                    tableHtml+="<td>"+row.age+"</td>";
                    tableHtml+="<td>"+row.gender+"</td>";
                    tableHtml+="<td>"+row.job+"</td>";
                    tableHtml+="</tr>";
                }
                $("#data-table tbody").html(tableHtml); // 将数据列表渲染到表格中
                $("#pagination").pagination({ // 渲染分页控件
                    currentPage:currentPage,
                    pageSize:pageSize,
                    totalPage:totalPages,
                    callback:function(page){ // 分页控件的回调函数，传入分页页码
                        option.pageNumber=page;
                        loadData(option);
                    }
                });
            } else {
                alert("请求失败！");
            }
       },
       error:function(){
           alert("请求失败！");
       }
    }
}
// 载入数据
function loadData(option){
    $.ajax(option.ajax);
}
$('#pagination').pagination(option);

4. 后端实现

对于后端，关键是提供分页数据查询接口。这里提供一个Java的分页实现示例。

@GetMapping("/getData")
@ResponseBody
public Result<List<User>> getData(@RequestParam(defaultValue = "1") Integer pageNumber,@RequestParam(defaultValue = "10") Integer pageSize){
    PageHelper.startPage(pageNumber,pageSize); // 分页插件的使用，设置当前页码和每页记录数
    List<User> users=userMapper.selectUsers(); // 查询所有数据
    PageInfo<User> pageInfo=new PageInfo<>(users); // 使用PageInfo包装查询结果
    return Result.success(pageInfo.getList(),pageInfo.getTotal()); // 返回数据列表和记录总数
}