时间戳

首页 > 解决方案 > 如何对大型 HTML 表格进行静态分页？

html - 如何对大型 HTML 表格进行静态分页？

问题描述

我在网页中有一个大表（3000+ 行），它需要很长时间才能完全加载，因此它会在 Google Core Web Vitals 中返回糟糕的分数。

我想给它分页。

目前我可以在网上找到的解决方案是：

  1. 使用支持服务器端处理的 WordPress 表格插件。但是，我尝试了几个，发现在加载表格的第一页时仍然会有 6 秒的延迟。

  2. 使用 Javascript 对表格进行分页。但是也会有延迟，因为 Javascript 会动态处理行，这需要一些时间。

实际上对于我的情况，排序和查找功能是没有用的，我只需要将表格放在多个页面中，每个页面都有固定的行数，例如 10 行。所以可以静态而不是动态地这样做，这样在加载第一页时不会造成任何处理时间，即我创建了300页，并将表格的内容一一放入其中。但是，手动执行此操作非常耗时。所以我只是想知道是否有一种简单的方法可以做到这一点，或者是否有一个现成的脚本或工具可以完成这项无聊的任务？

例如，如果我在 WordPress 中有一个帖子，其中包含下表：

<table width="100%" border="0">
  <tr>
    <td>1</td>
    <td>101</td>
  </tr>
  <tr>
    <td>2</td>
    <td>102</td>
  </tr>
  <tr>
    <td>3</td>
    <td>103</td>
  </tr>
  <tr>
    <td>4</td>
    <td>104</td>
  </tr>
  <tr>
    <td>5</td>
    <td>105</td>
  </tr>
  <tr>
    <td>6</td>
    <td>106</td>
  </tr>
  <tr>
    <td>7</td>
    <td>107</td>
  </tr>
  <tr>
    <td>8</td>
    <td>108</td>
  </tr>
  <tr>
    <td>9</td>
    <td>109</td>
  </tr>
  <tr>
    <td>10</td>
    <td>110</td>
  </tr>
</table>

是否有可以对表格进行分页的插件或工具，以便：

  1. 我可以指定每页的行数，例如 2。
  2. 根据每页的行数（2），插件可以自动创建5个帖子，每个帖子包含原始表格中的2行，并且在每个页面的底部，每个页面都有一个索引，例如“<<” ，“1”，“2”，..，“>>”。

例如，在第一篇文章中，表格内容应该是这样的：

<table width="100%" border="0">
  <tr>
    <td>1</td>
    <td>101</td>
  </tr>
  <tr>
    <td>2</td>
    <td>102</td>
  </tr>
</table>
<p><a href="post_1">&lt;&lt;</a> <a href="post_1">1</a> <a href="post_2">2</a> <a href="post_3">3</a> <a href="post_4">4</a> <a href="post_5">5</a> <a href="post_5">&gt;&gt;</a></p>

由于这些新帖子都是静态分表的，与动态分表相比不会有任何性能问题。

标签： htmlpagination

解决方案

推荐阅读