pagination in javascript for API

@ad1Oct 24.2010

I have an API which contains a JSON . The JSON looks like as shown below

{“oldestId”:”1″,”latestId”:”42″,”records”:[{“id”:”42″,”uid”:”34″,”time”:”1134314″,”email”:”[email protected]”,”fName”:”Matt”,”lName”:”Wright”,”level”:”0″,”description”:”User ~~[email]~~[email protected][/email] logged in”},{“id”:”41″,”uid”:”34″,”time”:”1134314″,”email”:”[email protected]”,”fName”:”Matt”,”lName”:”Wright”,”level”:”0″,”description”:”User ~~[email]~~[email protected][/email] logged in”},{“id”:”40″,”uid”:”34″,”time”:”1134314″,”email”:”[email protected]”,”fName”:”Matt”,”lName”:”Wright”,”level”:”0″,”description”:”User ~~[email]~~[email protected][/email] logged in”},{“id”:”39″,”uid”:”34″,”time”:”1134314″,”email”:”[email protected]”,”fName”:”Matt”,”lName”:”Wright”,”level”:”0″,”description”:”User ~~[email]~~[email protected][/email] logged in”}]}

I call the API from database on server side by Xmlhttp request and then put the JSON as an object in Javascript . I display the result of JSON as a list of activity tasks row by row as shown below

[email protected] , Matt Wright , User ~~[email]~~[email protected][/email] logged in , Jan 2, 1970, 22:5:14

I would like to display this result with pagination in javascript as there a lot of activity tasks and each page has to display 15 recent activity tasks . I tried jquery but it did not work . I have to display the above shown result with first,last, next and previous pagination options . The result is dynamic and the result changes daily and I have to show 15 recent activity tasks starting with the most recent activity task on one webpage using latestId in JSON and less recent activity task using oldestId in JSON and also I need to set limit for total recent activity tasks to 40 . Can anyone tell me the javascript functions needed for pagination which can be used with API . I have written javascript for generating above result using document.write already and it works fine . I only need to do pagination . I cannot put the above results in datatable because one of my JSON value that is time is in unix time format and it needs to be converted into local time so the result looks like as shown above Can anyone tell me how to set the above result so that the page can be paginated with first,last, next and previous pagination options . I am really stuck . If anyone needs more details please ask me
Any help with examples would be appreciated
Thanks in advance

to post a comment

JavaScript

6 Comments(s) _↴

@007JulienOct 24.2010 — #A simple prototype to improve

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="fr"><head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Pagination</title>
 <style type="text/css">
 p{margin:0;padding:0;}
 .pge{display:none}
 a{text-decoration:none;color:#909;font-weight:bold;}
 </style>
 </head>
 <body>
 The page ...
 <div id="mypages"></div>
 <script type="text/javascript">
 function $(i){return document.getElementById(i)}
 // Your object record
 var rcd=new Array();for (var i=0;i<42;i++) {rcd[i]={};rcd[i].id=42-i;rcd[i].fName='Smith'+rcd[i].id;}
 // Build "HTML pages" with numbers
 var chnPge='';var npg;
 for (j=0;j<rcd.length;j++) {
 if (j%15==0) {// new page
 npg=Math.floor(j/15)+1;
 chnPge+='<div id="pge'+npg.toString()+'" class="pge">';}
 chnPge+='<p>'+rcd[j].fName+'</p>';// current ligne
 if (j%15==14 || j+1==rcd.length) {// end of page or last record
 var pr='&nbsp;&nbsp;&nbsp;';if (1<npg) pr='<p><a href="javascript:othPge(-1)">prev</a>';
 var nx='<a href="javascript:othPge(1)">next</a></p>';if (j+1==rcd.length) nx='&nbsp;&nbsp;&nbsp;';
 chnPge+=pr+' page '+npg+' '+nx+'</div>';}
 }
 // Edit and show the page 1
 $('mypages').innerHTML=chnPge;
 nosPge=1;$('pge'+nosPge).style.display='block';
 // Change page
 function othPge(n){var newPge=nosPge-(-n);
 if (0<newPge && newPge<=npg){$('pge'+nosPge).style.display='none';
 $('pge'+newPge).style.display='block';nosPge=newPge;}
 }
 </script>
 </body>
 </html>[/code]

@ad1authorOct 24.2010 — #Thanks for your help I tried your code

This is my code with xmlhttp request as shown below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr"><head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Pagination</title>

<style type="text/css">

p{margin:0;padding:0;}

.pge{display:none}

a{text-decoration:none;color:#909;font-weight:bold;}

</style>

</head>

<body>

<script type="text/javascript" >

function sendRequest(urlStr) {

httpObject = getHTTPObject();

if (httpObject != null) {

httpObject.open("GET", urlStr, true);

httpObject.send(null);

httpObject.onreadystatechange = listHdlr;

} else

alert("The browser does not support XmlHttpRequest/XmlHttpResponse");

}

//<![CDATA[
  urlStr = "http://localhost/charts/activity.php";
  sendRequest(urlStr);
 
  //]]>

function getHTTPObject(){

if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");

else if (window.XMLHttpRequest) return new XMLHttpRequest();

else {

alert("Your browser does not support AJAX.");

return null;

}

}

function listHdlr(){

if(httpObject.readyState == 4){

var response = eval('('+httpObject.responseText+')');

for(var i=0; i<response.records.length; i++){
 
   months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   response.records[i].time = new Date(response.records[i].time*1000);
 
   month = response.records[i].time.getMonth();
 
   mTxt = months[month];
 
   response.records[i].timeH = response.records[i].time.getHours();
   if (response.records[i].timeH < 10) {
   response.records[i].timeH = "0" + response.records[i].timeH;
   }
 
   response.records[i].timeM = response.records[i].time.getMinutes();
   if (response.records[i].timeM< 10) {
   response.records[i].timeM = "0" + response.records[i].timeM;
   }
 
   response.records[i].timeS = response.records[i].time.getSeconds();
   if (response.records[i].timeS < 10) {
   response.records[i].timeS = "0" + response.records[i].timeS;
   }
   response.records[i].time = mTxt + " " + response.records[i].time.getDay() +  ", " + response.records[i].time.getFullYear() + ", " + response.records[i].time.getHours() + ":" + response.records[i].time.getMinutes() + ":" + response.records[i].time.getSeconds() +  "<br><br>";
 
   }

}

}

</script>

<div id="mypages"></div>

<script type="text/javascript">

function $(i){return document.getElementById(i)}

// Your object record

var records=new Array();for (var i=0;i<response.records.length;i++) {response.records[i]={};response.records[i].id=response.records.length-i;response.records[i].fName=''+response.records[i].id;}

// Build "HTML pages" with numbers

var chnPge='';var npg;

for (j=0;j<response.records.length;j++) {

if (j%15==0) {// new page

npg=Math.floor(j/15)+1;

chnPge+='<div id="pge'+npg.toString()+'" class="pge">';}

chnPge+='<p>'+response.records[j].fName+'</p>';// current ligne

if (j%15==14 || j+1==response.records.length) {// end of page or last record

var pr='   ';if (1<npg) pr='<p><a href="javascriptthPge(-1)">prev</a>';

var nx='<a href="javascriptthPge(1)">next</a></p>';if (j+1==response.records.length) nx='   ';

chnPge+=pr+' page '+npg+' '+nx+'</div>';}

}

// Edit and show the page 1

$('mypages').innerHTML=chnPge;

nosPge=1;$('pge'+nosPge).style.display='block';

// Change page

function othPge(n){var newPge=nosPge-(-n);

if (0<newPge && newPge<=npg){$('pge'+nosPge).style.display='none';

$('pge'+newPge).style.display='block';nosPge=newPge;}

}

</script>

</body>

</html>

I have added time conversion function since I have to convert unix time to local time . I have to use email ,fName ,lName , description and time from the same JSON which I showed in the previous post . When I run the above code in my browser it does not show anything . My JSON object is called response .The urlStr = "http://localhost/charts/activity.php" contains same JSON . I do not know what is wrong with the code , whatever needs to be changed please let me know. Can you please help me out with this problem as I have to get the same result which I showed in my previous post and the result has to be shown along with previous , next , first , last pagination options

Thanks in advance

@007JulienOct 24.2010 — #The pages can't be build before Ajax response !

You have to insert this building, like your time convertion, in a callback function ...

See this page for a XMLHttpRequest function.

@ad1authorOct 24.2010 — #thanks

what about the remaining code did you try running it if I leave the time conversion and run the code will it work fine and generate the result by JSON with pagination please let me know the how the code will look like

how do I link the functions for xmlhttp request with the pagination functions which you send so that I get the result which I showed in my previous post with pagination

@007JulienOct 24.2010 — #My last words...

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="fr"><head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Pagination</title>
 <style type="text/css">
 p{margin:0;padding:0;}
 .pge{display:none}
 a{text-decoration:none;color:#909;font-weight:bold;}
 </style>
 </head>
 <body>
 The page ...
 <div id="mypages"></div>
 <input type="button" onclick="sendRequest('http://localhost/charts/activity.php')" value="Request">
 <script type="text/javascript" >
 
 function sendRequest(urlStr) {
 httpObject = getHTTPObject();
 if (httpObject != null) {
 httpObject.open("GET", urlStr, true);
 httpObject.send(null);
 httpObject.onreadystatechange = listHdlr;}
 else alert("The browser does not support XmlHttpRequest/XmlHttpResponse");
 }
 function getHTTPObject(){
 if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
 else if (window.XMLHttpRequest) return new XMLHttpRequest();
 else {alert("Your browser does not support AJAX.");return null;}
 }
 // Global variables
 var nbrPge,nosPge;
 var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
 function listHdlr(){
 // to see what you get (on page 1 to open)
 var chnPge='<div id="pge1" class="pge">No response</div>';
 if(httpObject.readyState == 4){
 // I can't test your JSON response (Same origin policy)
 try { var response = eval('('+httpObject.responseText+')'); }
 catch(e){var response={};response.records = new Array();
 for (var i=0;i<42;i++) {
 response.records[i]={};response.records[i].id=42-i;response.records[i].fName='Smith'+response.records[i].id;}}
 for(var i=0; i<response.records.length; i++){
 
   // Your correction
   // See to : toLocaleString, toUTCString, méthodes
   response.records[i].time = new Date(response.records[i].time*1000);
   month = response.records[i].time.getMonth();
   mTxt = months[month];
   response.records[i].timeH = response.records[i].time.getHours();
   if (response.records[i].timeH < 10) {response.records[i].timeH = "0" + response.records[i].timeH;}
   response.records[i].timeM = response.records[i].time.getMinutes();
   if (response.records[i].timeM< 10) {response.records[i].timeM = "0" + response.records[i].timeM;}
   response.records[i].timeS = response.records[i].time.getSeconds();
   if (response.records[i].timeS < 10) {response.records[i].timeS = "0" + response.records[i].timeS;}
   response.records[i].time = mTxt + " " + response.records[i].time.getDay() + ", " + response.records[i].time.getFullYear() + ", " + response.records[i].time.getHours() + ":" + response.records[i].time.getMinutes() + ":" + response.records[i].time.getSeconds() + "<br><br>";
 
   // Build pages
   if (i%15==0) {// new page
   // To delete 'No response'
   if (i==0) chnPge='';
   nbrPge=Math.floor(i/15)+1;
   chnPge+='<div id="pge'+nbrPge.toString()+'" class="pge">';}
 
   // The line to complete
   chnPge+='<p>'+response.records[i].fName+'</p>';// current ligne
 
   if (i%15==14 || i+1==response.records.length) {// end of page
   var pr='';if (1<nbrPge) pr='<p><a href="javascript:othPge(-1)">prev</a>';
   var nx='<a href="javascript:othPge(1)">next</a></p>';if (i+1==response.records.length) nx='';
   chnPge+=pr+' page '+nbrPge+' '+nx+'</div>';}}}
 // Edit the pages
 document.getElementById('mypages').innerHTML=chnPge;
 // Show the firsty one
 nosPge=1;document.getElementById('pge'+nosPge).style.display='block';
 }
 function othPge(n){var newPge=nosPge-(-n);
 if (0<newPge && newPge<=nbrPge){
 document.getElementById('pge'+nosPge).style.display='none';
 document.getElementById('pge'+newPge).style.display='block';
 nosPge=newPge;}
 }
 </script>
 </body>
 </html>[/code]

Good luck

@ad1authorOct 25.2010 — #Thanks a lot

it worked

Also in #JavaScript _↴

Could you just have a quick peek to check this is right please!Cross Domain Cookies, HELP !What is this effect called....

Success!

Help @ad1 spread the word by sharing this article on Twitter...

Tweet This

pagination in javascript for API

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

pagination in javascript for API

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴