使用数据表格进行分页

使用数据表格进行分页的完整攻略如下：

步骤一：准备数据

首先需要从数据库中查询出数据，可以使用如下的 SQL 语句来查询某张表中的所有数据：

SELECT * FROM table_name;

然后将查询结果保存到一个数组或列表中。

步骤二：渲染表格

使用 html 和 css 创建一个表格，每行显示一条数据。当数据过多时，可以使用滚动条进行浏览。一个示例的 HTML 代码如下：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>[e-mail]</td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

步骤三：添加分页功能

在表格下方添加一个分页器，用于显示当前页码和总页数，并提供翻页的功能。一个示例的 HTML 代码如下：

<div class="pagination">
  <a href="?page=1">&laquo; First</a>
  <a href="?page=2">2</a>
  <a class="active" href="?page=3">3</a>
  <a href="?page=4">4</a>
  <a href="?page=5">5</a>
  <a href="?page=6">&hellip;</a>
  <a href="?page=10">10</a>
  <a href="?page=4">&raquo; Last</a>
</div>

其中，每个 <a> 标签链接了不同的页码。在当前页码下，添加了一个 .active 类。

在后端程序中，需要通过查询字符串获取当前页码，然后根据每一页需要显示多少条数据，从数组或列表中过滤出当前页需要显示的数据，然后重新渲染表格和分页器即可。

示例一：PHP + MySQL

以下是一个使用 PHP 和 MySQL 实现分页的示例。假设数据表名为 users，字段名为 id、 name、 age 和 email。

// 获取当前页码，如果未设置则默认为第一页
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;

// 每页显示多少条数据
$limit = 10;

// 数据库连接信息
$host = "localhost";
$user = "username";
$password = "password";
$dbname = "database_name";

// 连接数据库
$conn = mysqli_connect($host, $user, $password, $dbname);

// 查询数据总数
$sql = "SELECT count(*) as total FROM users";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
$total = $row['total'];

// 计算总页数
$num_pages = ceil($total / $limit);

// 当前页码超出范围时，自动调整到最后一页
if ($page > $num_pages) {
  $page = $num_pages;
}

// 计算当前页要显示的数据的起始位置
$start = ($page - 1) * $limit;

// 查询当前页的数据
$sql = "SELECT * FROM users LIMIT $start, $limit";
$result = mysqli_query($conn, $sql);
$rows = mysqli_fetch_all($result, MYSQLI_ASSOC);

// 关闭数据库连接
mysqli_close($conn);

以上代码通过 mysqli 扩展库连接 MySQL 数据库，并查询出所有数据的总数以及当前页需要显示的数据。然后计算出总页数，并根据当前页码计算出起始位置，查询出当前页需要显示的数据。最后关闭数据库连接。

接下来，将查询结果用于渲染表格和分页器。以下是示例 HTML 代码：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($rows as $row) : ?>
      <tr>
        <td><?= $row['id'] ?></td>
        <td><?= htmlspecialchars($row['name']) ?></td>
        <td><?= $row['age'] ?></td>
        <td><?= htmlspecialchars($row['email']) ?></td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

<div class="pagination">
  <?php if ($page > 1) : ?>
    <a href="?page=1">&laquo; First</a>
    <a href="?page=<?= $page - 1 ?>">&lsaquo; Previous</a>
  <?php endif; ?>

  <?php for ($i = 1; $i <= $num_pages; $i++) : ?>
    <a href="?page=<?= $i ?>" <?= $i === $page ? 'class="active"' : '' ?>><?= $i ?></a>
  <?php endfor; ?>

  <?php if ($page < $num_pages) : ?>
    <a href="?page=<?= $page + 1 ?>">Next &rsaquo;</a>
    <a href="?page=<?= $num_pages ?>">&raquo; Last</a>
  <?php endif; ?>
</div>

以上代码首先使用 PHP 的 foreach 循环渲染出数据表格，其中通过 htmlspecialchars 函数对每个单元格的内容进行了转义，以避免 XSS 攻击。然后根据总页数和当前页码，使用 for 循环渲染出分页器。如果当前处于第一页或最后一页，将不会渲染「First」或「Last」链接。

示例二：Vue.js

以下是一个使用 Vue.js 实现分页的示例。

假设数据保存在一个名为 data 的数组中，每个元素包含 id、 name、 age 和 email 四个属性。

<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in pagedData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.email }}</td>
      </tr>
    </tbody>
  </table>

  <div class="pagination">
    <a href="#"
      @click.prevent="setCurrentPage(1)"
      :disabled="currentPage === 1">&laquo; First</a>

    <a href="#"
      @click.prevent="setCurrentPage(currentPage - 1)"
      :disabled="currentPage === 1">&lsaquo; Previous</a>

    <a href="#"
      v-for="page in numPages"
      :key="page"
      @click.prevent="setCurrentPage(page)"
      :class="{ active: currentPage === page }">{{ page }}</a>

    <a href="#"
      @click.prevent="setCurrentPage(currentPage + 1)"
      :disabled="currentPage >= numPages">&rsaquo; Next</a>

    <a href="#"
      @click.prevent="setCurrentPage(numPages)"
      :disabled="currentPage >= numPages">&raquo; Last</a>
  </div>
</div>

以上代码使用 Vue.js 的 v-for 指令渲染出数据表格，使用 v-bind 指令绑定「First」和「Previous」链接的 disabled 属性以控制它们的可用性。分页器部分使用 v-for 渲染出每个页面，使用 v-bind 绑定当前页码和页面的 active 类。

new Vue({
  el: "#app",
  data: {
    data: [], // 总的数据
    itemsPerPage: 10, // 每页显示多少条数据
    currentPage: 1 // 当前页码
  },
  computed: {
    numPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    },
    pagedData() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.data.slice(startIndex, endIndex);
    }
  },
  methods: {
    setCurrentPage(page) {
      this.currentPage = page;
    }
  }
});

以上代码创建了一个 Vue.js 实例，并使用 computed 属性计算出总页数和当前页要显示的数据，使用 methods 属性添加了一个方法 setCurrentPage 用于设置当前页码。在 HTML 代码中通过 v-bind 绑定了相应的数据和事件。

在实际应用中，需要将数据保存在一个服务器端，并通过 AJAX 等技术从客户端请求数据。以上示例的代码只是在本地直接使用数组来演示分页的实现。