javascript - 使用 div 和 Javascript 的动态分页

Question

我有一个创建表的记录集循环，每 9 个元素围绕它们包装一个 div，所以基本上看起来像:

<div>
<table>rs1, rs2 ----> rs9</table>
</div>
<div>
<table>rs10, rs11 ----> rs18</table>
</div>

etc...

现在，我想要它，所以一开始只有第一个 div 显示而其他的被隐藏，但是我有 ASP 循环为各种 div(页面)生成可点击的链接，点击任何给定的链接将显示 div 和隐藏所有其他的。

这是我目前的 asp 代码:

Dim i
  If totalPages > 1 Then
    Response.Write("<div id='navigation'>")
  For i=1 to totalPages
      Response.Write ("<a href='' onlick=''>"& i &"</a> | ")
  Next
  Response.Write("</div>")
  End If

现在我只需要弄清楚 javascript...

Answer 1

为了使这更容易，您应该以某种方式识别您的表。给他们一个标识特定结果集的 ID 和一个标识所有结果集的类名:

<table id="resultset-1" class="resultset"> ...

然后您可以将事件绑定(bind)到导航元素中的链接:

window.onload = function() {
    document
        .getElementById('navigation')
        .getElementByTagName('a')
        .onclick = function() {
            var id = parseInt(this.innerHTML, 10);
            document.getElementsByClassName('resultset').style.display = 'none';
            document.getElementById('resultset-'+id).style.display = 'block';
            return false;
        }
}

我还没有测试过这个，我的 vanilla JS 技能有点生疏，但它应该符合我的理解。只是为了好玩，这里有一个使用 jQuery 的版本，我可以保证它可以工作:

$(function() {
    $('#navigation a').click(function() {
        var id = parseInt($(this).html(), 10);
        $('.resultset').hide();
        $('#resultset-'+id).show();
        return false;
    });
});

记住最初隐藏除了第一个 div 之外的所有内容——你不需要为此使用 JS，你可以使用 ASP 打印 style="display: none;" 到你想要的所有表格例如，想要隐藏。