如何在jQuery中为数据库动态数据实现分页？现有插件失效求替代

Hey there! Sorry to hear the Paginator plugin isn't playing nice with your dynamically loaded table—let's sort this out. Below are reliable jQuery-based pagination plugins that work seamlessly with AJAX-fetched data, plus a key optimization tip for large datasets:

推荐插件 #

1. DataTables #

This is the go-to choice for most developers dealing with dynamic tables. It has built-in support for AJAX data sources, pagination, sorting, and search, and handles dynamic content updates effortlessly.

• How to use with AJAX: You can either let DataTables handle the AJAX request directly (by specifying your API endpoint in the config), or if you're fetching data via your own AJAX call, you can populate the table and trigger pagination manually:

  // 假设你已经通过AJAX获取到了数据dataArray
  const table = $('#yourTable').DataTable({
    pageLength: 10, // 每页显示条数
    destroy: true // 允许重新初始化（如果表格已存在）
  });
  // 清空旧数据并添加新数据
  table.clear().rows.add(dataArray).draw();
  

• It automatically updates pagination controls when new data is added, and supports backend-side pagination (ideal for thousands of records) by letting you pass page numbers and per-page counts to your API.

2. jPages #

A lightweight, flexible plugin designed to work with dynamic content. It doesn’t require pre-knowledge of total items, making it perfect for AJAX-loaded data.

• Post-AJAX setup: After inserting your fetched data into the table, re-initialize jPages to render the pagination controls:

  $.ajax({
    url: 'your-data-endpoint',
    success: function(data) {
      // 将数据插入表格tbody
      $('#tableBody').html(data);
      // 初始化/更新分页
      $('.pagination-holder').jPages({
        container: '#tableBody tr',
        perPage: 10,
        first: 'First',
        last: 'Last'
      });
    }
  });
  

3. jQuery Pagination Plugin (flexible version) #

This plugin gives you full control over pagination logic, making it easy to hook into your AJAX workflow. You can update the total number of pages and current page dynamically after fetching data.

• Basic workflow:

  // 假设AJAX返回totalItems和currentPage数据
  $.ajax({
    url: 'your-data-endpoint',
    data: { page: currentPage, perPage: 10 },
    success: function(response) {
      // 渲染当前页的表格数据
      $('#tableBody').html(response.rows);
      // 初始化分页控件
      $('#pagination').pagination({
        items: response.totalItems,
        itemsOnPage: 10,
        currentPage: response.currentPage,
        onPageClick: function(pageNumber) {
          // 点击页码时重新请求对应页的数据
          fetchData(pageNumber);
        }
      });
    }
  });
  

重要优化建议 #

For thousands of records, client-side pagination (loading all data at once and filtering on the frontend) can slow down your page. Instead, implement backend-side pagination:

• When making AJAX requests, send page and perPage parameters to your server.
• Your server returns only the data for the requested page, plus the total number of records.
• All the plugins above support this pattern, which will drastically improve performance for large datasets.

内容的提问来源于stack exchange，提问作者Haris Khan