开发者

Dynamic paging using divs and Javascript

I have a recordset loop that creates a table, and every 9 items it wraps a div around them so basica开发者_如何学Clly 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...


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜