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>