Java分页详解

在实际开发中，很多场景需要对数据进行分页处理，以减轻数据库读取压力，同时保证数据的显示效果。本文将从多个方面详细阐述Java如何实现分页功能。

一、JS分页怎么实现

JS分页是我们在网页开发中经常用到的技术，通过JS可以轻松实现分页效果。一般情况下，我们会将数据全部读取出来，在JS代码中进行分页处理。JS分页有以下优点：

1、可以实现前端加载数据，减少后端计算处理时间；

2、可以根据需求定制分页效果，支持多种样式和效果；

3、可以配合Ajax异步加载动态数据，提高用户体验。

下面是JS分页的代码示例：

// 分页组件
function Pagination(options) {
  this.currentPage = options.currentPage || 1; // 当前页码
  this.pageSize = options.pageSize || 10; // 每页显示数量
  this.totalCount = options.totalCount || 0; // 数据总数
  this.container = options.container || ''; // 分页容器
  this.onPageChange = options.onPageChange; // 页码切换回调函数
}

Pagination.prototype.init = function () {
  var totalPage = Math.ceil(this.totalCount / this.pageSize);
  var pages = [];
  pages.push('<a href="#" data-page="prev"><<');
  
  // 根据页码数量生成分页数字按钮
  for (var i = 1; i ' + i + '</span>');
     } else {
       pages.push('<a href="#" data-page="' + i + '">' + i + '</a>');
     }
  }
  
  pages.push('<a href="#" data-page="next">>>');
  
  // 将分页按钮渲染到页面上
  $(this.container).html(pages.join(''));
  
  // 绑定分页按钮点击事件
  $(this.container).off('click', 'a');
  $(this.container).on('click', 'a', function (e) {
    e.preventDefault();
    var page = $(this).data('page');
    
    if (page == 'prev') {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    } else if (page == 'next') {
      if (this.currentPage < totalPage) {
        this.currentPage++;
      }
    } else {
      this.currentPage = page;
    }
    
    this.onPageChange && this.onPageChange(this.currentPage, this.pageSize);
    this.init();
  }.bind(this));
};

// 实例化分页组件
var pagination = new Pagination({
  currentPage: 1,
  pageSize: 10,
  totalCount: 100,
  container: '#pagination',
  onPageChange: function (page, pageSize) {
    // Do something
  }
});

pagination.init();

二、网页分页是怎么实现的

通常情况下，网页分页是基于后端的分页方式，即在后端根据用户请求参数进行分页计算，然后根据结果渲染到前端页面。相比于JS分页，网页分页在数据量较大时有明显的优势。

下面是基于后端的网页分页示例：

// 控制器
@GetMapping("/list")
public String list(@RequestParam(defaultValue = "1") Integer page,
                   @RequestParam(defaultValue = "10") Integer size,
                   Model model) {
  PageRequest pageRequest = PageRequest.of(page - 1, size);
  Page<Article> articles = articleService.list(pageRequest);
  model.addAttribute("articles", articles.getContent());
  model.addAttribute("totalPages", articles.getTotalPages());
  model.addAttribute("currentPage", page);
  
  return "article_list";
}

// 分页查询方法
public Page<Article> list(Pageable pageable) {
  return articleRepository.findAll(pageable);
}

// 页面示例
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>标题</th>
      <th>作者</th>
      <th>发布时间</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="article : ${articles}">
      <td th:text="${article.id}"></td>
      <td th:text="${article.title}"></td>
      <td th:text="${article.author}"></td>
      <td th:text="${article.createTime}"></td>
    </tr>
  </tbody>
</table>

<div class="pagination">
  <ul>
    <li th:class="${currentPage == 1} ? disabled : ''">
      <a th:href="@{/article/list(page=1)}"><<<<<<<<<<<<<<<<<<<<
    </li>
    <li th:class="${currentPage == 1} ? disabled : ''">
      <a th:href="@{/article/list(page=${currentPage-1})}"><<
    </li>
    <li th:class="${currentPage == totalPages} ? disabled : ''">
      <a th:href="@{/article/list(page=${currentPage+1})}">>>
    </li>
    <li th:class="${currentPage == totalPages} ? disabled : ''">
      <a th:href="@{/article/list(page=${totalPages})}">>>>>>>>>>>>>>>>>>>>>>>
    </li>
  </ul>
</div>

三、Web分页怎么实现

Web分页是一种基于后端的分页方式，类似于网页分页，但是一般用于Web应用程序中。Web分页有以下特点：

1、Web分页一般会将数据源封装到Data Access Object（DAO）中，以提高代码复用性；

2、Web分页支持多种查询条件，例如排序、过滤、关键字等；

3、Web分页一般会将分页信息与查询结果封装到统一对象中，方便后续处理。

下面是Web分页的代码示例：

// 控制器
@GetMapping("/list")
public String list(@RequestParam(defaultValue = "1") Integer page,
                   @RequestParam(defaultValue = "10") Integer size,
                   @RequestParam(defaultValue = "") String keyword,
                   Model model) {
  PageRequest pageRequest = PageRequest.of(page - 1, size, Sort.Direction.DESC, "createTime");
  Page<Article> articles = articleService.list(pageRequest, keyword);
  model.addAttribute("articles", articles.getContent());
  model.addAttribute("totalPages", articles.getTotalPages());
  model.addAttribute("currentPage", page);
  model.addAttribute("keyword", keyword);
  
  return "article_list";
}

// 分页查询方法
public Page<Article> list(Pageable pageable, String keyword) {
  Specification<Article> spec = new Specification<Article>() {
    @Override
    public Predicate toPredicate(Root<Article> root,
                                 CriteriaQuery<?> query,
                                 CriteriaBuilder criteriaBuilder) {
      List<Predicate> predicates = new ArrayList<>();
      
      if (!StringUtils.isEmpty(keyword)) {
        predicates.add(criteriaBuilder.like(root.get("title"), "%" + keyword + "%"));
      }
      
      return criteriaBuilder.and(predicates.toArray(new Predicate[0]));
    }
  };
  
  return articleRepository.findAll(spec, pageable);
}

// 页面示例
<form th:action="@{/article/list}">
  <div>
    <label>关键字：
      <input type="text" name="keyword" th:value="${keyword}">
    </label>
    <button type="submit">搜索
  </div>
</form>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>标题</th>
      <th>作者</th>
      <th>发布时间</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="article : ${articles}">
      <td th:text="${article.id}"></td>
      <td th:text="${article.title}"></td>
      <td th:text="${article.author}"></td>
      <td th:text="${article.createTime}"></td>
    </tr>
  </tbody>
</table>

<div class="pagination">
  <ul>
    <li th:class="${currentPage == 1} ? disabled : ''">
      <a th:href="@{/article/list(page=1, size=${size}, keyword=${keyword})}"><<
    </li>
    <li th:class="${currentPage == 1} ? disabled : ''">
      <a th:href="@{/article/list(page=${currentPage-1}, size=${size}, keyword=${keyword})}"><<<
    </li>
    <li th:class="${currentPage == totalPages} ? disabled : ''">
      <a th:href="@{/article/list(page=${currentPage+1}, size=${size}, keyword=${keyword})}">>>>
    </li>
    <li th:class="${currentPage == totalPages} ? disabled : ''">
      <a th:href="@{/article/list(page=${totalPages}, size=${size}, keyword=${keyword})}">>>
    </li>
  </ul>
</div>