Java实现分页的前台页面和后台代码

关于如何实现Java分页，需要分别从前台页面和后台代码两个部分进行讲解。

前台页面实现分页

在前台页面实现分页，主要采用的是利用jQuery的ajax异步加载技术来获取数据库中的数据，同时使用bootstrap的分页组件来实现分页。

示例代码如下：

<!-- 前台页面加载表格和分页组件 -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <!-- 表格内容通过ajax生成 -->
  </tbody>
</table>
<nav aria-label="Page navigation">
  <ul class="pagination justify-content-center" id="page-nav">
    <!-- 分页组件通过ajax生成 -->
  </ul>
</nav>

<!-- 加载jQuery和bootstrap库 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
  // 首次加载页面时，获取第一页数据
  getData(1);

  // 监听分页组件的点击事件
  $('#page-nav').on('click', 'a', function(event) {
    var page = $(this).attr('data-page');
    getData(page);
    event.preventDefault();
  });

  function getData(page) {
    $.ajax({
        url: 'data.jsp', // 后台JSP代码的地址
        data: { page: page }, // 传递的参数
        type: 'POST', // 网络请求的方式
        dataType: 'json', // 预期响应的数据类型
        success: function(data) {
            // 生成表格数据
            var html = '';
            for (var i = 0; i < data.list.length; i++) {
                html += '<tr>';
                html += '<td>' + data.list[i].name + '</td>';
                html += '<td>' + data.list[i].age + '</td>';
                html += '<td>' + data.list[i].sex + '</td>';
                html += '</tr>';
            }
            $('#table-body').html(html);

            // 生成分页组件
            html = '';
            for (var i = 1; i <= data.totalPages; i++) {
                html += '<li class="page-item ';
                html += (i === data.pageNum ? 'active' : '');
                html += '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
            }
            $('#page-nav').html(html);
        },
        error: function(xhr, status, error) {
            console.error('AJAX request error: ' + status + ', ' + error);
        }
    });
  }
});
</script>

前台页面通过ajax向后端传递参数，后台接收参数后进行分页操作并返回分页所需的数据（例如：当前页码、总页码、每页显示的数据量和数据内容等），前台页面再通过ajax将数据渲染到对应的html元素上。

后台代码实现分页

在后台代码实现分页，主要利用mybatis-plus框架进行分页查询操作。

示例代码如下：

//引入mybatis-plus的分页查询类
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;

@Service
public class UserServiceImpl implements UserService {

  @Autowired
  private UserMapper userMapper;

  @Override
  public IPage<User> list(int pageNum, int pageSize) {
    Page<User> page = new Page<>(pageNum, pageSize); // 创建分页对象
    return userMapper.selectPage(page, null); // 委托mybatis-plus实现分页
  }

}

通过引入mybatis-plus框架，我们可以直接创建分页对象，然后通过mapper的selectPage函数，实现分页查询操作。

需要注意的是，返回的分页对象是一个继承自mybatis-plus的IPage接口的对象，其中包含了当前页码、总页码、每页显示的数据量和数据内容等信息。

以上是Java实现分页的前台页面和后台代码的完整攻略。