在多个表中循环访问数据页的最佳方法？

Question

我正在汇总来自我们所有思科交换机端口的网络数据，以及来自其他数据库的其他内容，并输出到一个HTML文件，呈现出惊人的像这样（除了我是一个白痴，只是意识到我画了“tbody”到处都是“thead”而不是：

我现在只在每个表中显示10行数据（它们是分配了tbody，thead和tfoot标签的HTML表格;还没有PHP，Javascript等，只有纯HTML）一切都很整洁和类似（有些交换机有48个端口，有24个等等）。我想使用那些“Prev，1,2，[...]，Next”按钮循环显示每个开关的数据，最好不要刷新页面。

我过去使用的是这种设置：

• 为每个可能的数据集显示自己的“div”id
• 制作他们的“style.display”属性='无'（第一页除外）
• 有一个将这些div放在数组中的Javascript函数
• 该功能可以隐藏和显示div，并且只显示我传递的div 作为一个论点
• 将此功能绑定到HTML按钮的onClick事件

这是最好的方式吗？因为我正在动态创建这个HTML（我将文本从C ++程序输出到index.html就像老板一样），这意味着将div ID分配给许多不同的部分，即使这样我也可以创建只更新按钮的父级所在的div？

我认为这可能可能并且肯定耗费时间，但我不是一个优秀的网络程序员。如果有更好的方法，我会先听听它，然后再花上太多时间。

Answer 1

如果你不介意额外的库，datatables会使分页变得容易（正如你所提到的，只需预先填充然后让JS完成工作）。

缺点是它是一个包含的库（这意味着直接将其包含在<script>中的HTML中，或者找到CDN对它的引用）。好处是内置分页，你需要担心的是在那里获取数据。然后，通过一些快速配置选项，以及可选的一些.CSS更改，您将获得所需的结果。

Answer 2

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

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
    }
}

这将为每个表页脚创建一个单击处理程序，您可以通过查看事件对象的target属性（或oldIE上的srcElement）来检测单击了哪个按钮。然后，您可以使用parentElement之类的标准属性遍历相对于该元素的DOM（请参阅MDN以供参考）。