...

View Full Version : onclick paginate records



nikko50
09-18-2009, 01:52 AM
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

jmrker
09-18-2009, 05:46 AM
This is just a simulation of your AJAX retrieval, but it should get you started.


<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!
:)

nikko50
09-18-2009, 04:40 PM
This is perfect!! Tracy:)

jmrker
09-18-2009, 07:14 PM
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:


<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!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum