Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    onclick paginate records

    I already have something that paginates thru records by clicking a next or back link that works great. Now I would like to upgrade this to a paginate script that does not do page loads everytime the user clicks next or back. I know how to refresh the new record into input fields with ajax so I don't need help there but how do I change the text of the record count that displays to the user on the screen with javascript as the page will not refresh so I can't write "Record 5 of 200" or whatever record the user is on. I guess I'm asking how can I write to the screen without page refreshes. I will be using an onclick event to click thru the records. How can I add a different number as a parameter to the onclick event everytime I click it without page refreshes? I was going to use the record id number as a parameter to the function so I know what record to get. Sorry for the long rambling post.
    Tracy
    Last edited by nikko50; 09-18-2009 at 12:55 AM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Con

    This is just a simulation of your AJAX retrieval, but it should get you started.
    Code:
    <html>
    <head>
    <title>Page Records</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=177298
    
    var recno = 0;
    var maxRec = 500;
    
    function SimulatedAJAXrecord(amt) {
    	recno = recno + amt;
    	if (recno < 0) { recno = 0; }
    	if (recno > maxRec) { recno = maxRec; }
    	return 'Record #'+recno;
    }
    function PrevRec(amt) {
      document.getElementById('RecNo').innerHTML = SimulatedAJAXrecord(amt);	
      document.getElementById('RecordDisplayed').innerHTML = '<h2>Display of contents<br>of record #'+recno+'</h2>';	
    }
    function NextRec(amt) {
      document.getElementById('RecNo').innerHTML = SimulatedAJAXrecord(amt);	
      document.getElementById('RecordDisplayed').innerHTML = '<h2>Display of contents<br>of record #'+recno+'</h2>';	
    }
    
    </script>
    </head>
    <body onload="NextRec(0)">
    <form id="myForm" name='myForm' action="javascript:alert('Success')" onsubmit="return false">
    <button onclick="PrevRec(-100)">Back 100</button>
    <button onclick="PrevRec(-10)">Back 10</button>
    <button onclick="PrevRec(-1)">Back 1</button>
    <span id="RecNo">Record #</span>
    <button onclick="NextRec(1)">Next 1</button>
    <button onclick="NextRec(10)">Next 10</button>
    <button onclick="NextRec(100)">Next 100</button>
    
    <div id="RecordDisplayed"><h2>Display of contents<br>of record #</h2></div>
    </form>
    </body>
    </html>
    Good Luck!

  • Users who have thanked jmrker for this post:

    nikko50 (09-18-2009)

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    This is perfect!! Tracy

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by nikko50 View Post
    This is perfect!! Tracy
    You're most welcome.
    I'm glad I'm able to help.

    BTW, you could condense it a bit more since 'PrevRec()' and 'NextRec()' functions are the same.
    Just remove the 'PrevRec()' function and put in:
    Code:
    <button onclick="NextRec(-100)">Back 100</button>
    <button onclick="NextRec(-10)">Back 10</button>
    <button onclick="NextRec(-1)">Back 1</button>
    But that change will depend upon your real needs rather than the simulated program.

    Good Luck!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •