Javascript 循环浏览多个表中的数据页的最佳方法？

我收集了所有Cisco交换机端口的网络数据，以及其他数据库中的其他数据，并输出到一个HTML文件中，该文件呈现出惊人的效果（除了我是个白痴，刚刚意识到我在所有地方都画了“tbody”而不是“thead”）：

我现在只在每个表中显示10行数据（它们是分配了tbody、thead和tfoot标记的HTML表；完全没有PHP、Javascript等，只是纯HTML），以保持一切整洁和相似（一些交换机有48个端口，大约24个端口，等等）。我想使用那些“Prev，1，2，[…]，Next”按钮循环浏览每个开关的数据，最好不要刷新页面

我过去使用的是以下设置：

• 给出每个可能的数据集以显示其自己的“div”id
• 使其“style.display”属性为“none”（第一页除外）
• 使用Javascript函数将这些div放入一个数组中
• 该函数可以隐藏和显示div，并且只显示我经过的div 作为论据
• 将此函数绑定到HTML按钮的onClick事件

这是最好的方式吗？因为我正在动态创建这个HTML（我将文本从C++程序输出到索引，像老板一样），这意味着将DIV ID分配给许多不同的部分，甚至可以创建只更新按钮父代的div的函数吗？p>

---

我认为这是可能的，当然也很费时，但我不是一个伟大的网络程序员。如果有更好的解决方法，我希望在继续花费太多时间之前先听听。

您可以使用事件委派仅设置几个事件处理程序：

var footers = document.getElementsByTagName('tfoot');
for(var i=0; i<footers.length; i++) {
    footers[i].onclick = function(e) {
        console.log(e.target); // the clicked element within the footer
    }
}

var footers=document.getElementsByTagName（'tfoot'）；
for（var i=0；i如果您不介意增加一个库，将使分页变得容易（并且，正如您所提到的，只需预先填充，然后让JS来完成这项工作）

缺点是它是一个包含的库（这意味着要么直接将它包含在
中的HTML中，要么查找对它的引用）。好处是分页是内置的，您所需要担心的就是在其中获取数据。然后，通过一些快速配置选项，以及一些可选的.CSS更改，您可以获得所需的结果。
我认为这非常适用，但是Brad的“datatables”这个建议看起来和我需要的一模一样。不过，谢谢！是的，当我看到他的答案时我也这么认为。说吧，那是一个很好的图书馆！看起来很完美。如果他们完成了工作，我不介意增加图书馆。谢谢！