Question

I have a recordset loop that creates a table, and every 9 items it wraps a div around them so basically looks like:

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

etc...

Now, I want it so at first only the first div is showing and the others are hidden, but I have ASP loop that generates clickable links for the various divs (pages) and clicking on any given link will show that div and hide all the others.

Here is the asp code I have so far:

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

Now I just need to figure out the javascript…

Answer 1

To make this easier, you should identify your tables somehow. Give them an ID that identifies a specific resultset and a classname that identiefies all resultsets:

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

Then you can bind an event to the links in your navigation element:

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

I haven’t tested this and my vanilla JS skills are a bit rusty, but it should work to my understanding. Just for the kicks, here’s a version using jQuery which I can guarantee to work:

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

Remember to initially hide all but the first div somehow – you don’t need to use JS for that, you can use ASP to print style="display: none;" to all tables you want to hide, for example.