jQuery分页table-CFANZ编程社区

jQuery分页table

介绍

在网页开发中，经常会遇到需要显示大量数据的场景。为了提高用户体验和页面加载速度，我们通常会将数据分页显示。在本文中，我们将介绍如何使用jQuery来实现一个分页table。

准备工作

在开始之前，我们需要准备一些基本的东西：

一个包含大量数据的table，可以写死在HTML文件中，也可以通过Ajax请求获取。
引入jQuery库文件，以及我们将使用的分页插件。

基本原理

分页table的基本原理是将大量的数据分成若干页进行显示，用户可以通过点击页码或者上一页/下一页按钮来切换页面。当用户点击页码或者上一页/下一页按钮时，我们会通过jQuery来动态改变table的显示内容。

实现步骤

在HTML文件中，创建一个包含数据的table，并添加一个空的<tbody>元素，用于动态填充数据。

<table id="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

使用jQuery的Ajax方法从服务器获取数据。这里假设我们从服务器获取的数据是一个包含多个对象的数组。我们可以将每个对象的属性作为table的一行数据，每个属性的值作为table的一列数据。

$.ajax({
  url: 'data.json',
  success: function(data) {
    // 处理返回的数据
    // ...
  }
});

将数据分页并动态填充到table中。我们可以使用一个分页插件来处理分页逻辑，这里我们以pagination.js为例。

$('#data-table').pagination({
  dataSource: data,
  pageSize: 10,
  callback: function(data, pagination) {
    var html = '';

    // 将每个对象的属性作为一行数据，每个属性的值作为一列数据
    $.each(data, function(index, item) {
      html += '<tr>';
      html += '<td>' + item.name + '</td>';
      html += '<td>' + item.age + '</td>';
      html += '<td>' + item.gender + '</td>';
      html += '</tr>';
    });

    // 清空tbody并填充新的数据
    $('#data-table tbody').html(html);
  }
});

添加分页控件。这里我们以pagination.js的默认分页控件为例，显示页码和上一页/下一页按钮。

$('#data-table').pagination({
  // ...
  callback: function(data, pagination) {
    // ...

    // 添加分页控件
    var paginationHtml = '<div class="pagination">';
    paginationHtml += '<a rel="nofollow" href="#" class="prev">&laquo;</a>';
    for (var i = 1; i <= pagination.totalNumber; i++) {
      paginationHtml += '<a rel="nofollow" href="#" class="page">' + i + '</a>';
    }
    paginationHtml += '<a rel="nofollow" href="#" class="next">&raquo;</a>';
    paginationHtml += '</div>';

    $('#data-table').after(paginationHtml);
  }
});

实现点击分页控件时的切换逻辑。我们可以使用jQuery的事件委托来实现这个功能。

$('body').on('click', '.page', function() {
  var page = parseInt($(this).text());

  // 切换页面并重新填充数据
  $('#data-table').pagination('go', page);
});

$('body').on('click', '.prev', function() {
  // 切换到上一页并重新填充数据
  $('#data-table').pagination('prev');
});

$('body').on('click', '.next', function() {
  // 切换到下一页并重新填充数据
  $('#data-table').pagination('next');
});

示例

假设我们有一个包含100条数据的数组，每个对象有name、age和gender三个属性。我们可以通过以下代码来演示分页table的使用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>分页table示例</title>
  <link rel="stylesheet" href="pagination.css">
</head>
<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>姓名</th>
        <