Pagination in Java Script(using prototype.js)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script src=”prototype.js” type=”text/javascript”></script>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
/*
Configurations for Paging

*/
var maxRecordShow=10;    // assgin from the config files
var totalRecordInDB=53; // get the record count from the backend, and assign here

var totalRecordCount=(totalRecordInDB/maxRecordShow);
var maxTotalPage=Math.ceil(totalRecordCount);

var currentPageSet=1;
var previousPageSet=0;

var nextPointer;
var prevPointer;

//–>
</SCRIPT>
</HEAD>

<BODY>
Page<div id=”pg” style=”display:inline”> 1</div> out of <span id=”total”></span> <br><br>
Records<br><div id=”rec” style=”display:inline”></div> <br><br>

<a href=”#?” id=”prev” onClick=”prevList()”>prev</a>&nbsp;&nbsp;   <a href=”#?” id=”next” onClick=”nextList()”>next</a>
<!– Data Table –>
<table id=”recTbl” name=”recTbl” cellspacing=”4″ cellpadding=”0″ border=”1″>
<tbody><tr>
<td>Title</td>
<td>Category</td>
<td>Type</td>
<td>Location</td>
</tr></TBODY>

</tbody>
</table>
<!– End Data Table –>

<a href=”#?” id=”prev” onClick=”prevList()”>prev</a>&nbsp;&nbsp;   <a href=”#?” id=”next” onClick=”nextList()”>next</a>
</BODY>

</HTML>

<SCRIPT LANGUAGE=”JavaScript”>

$(“total”).innerHTML=maxTotalPage;

function nextList(){
if(currentPageSet <maxTotalPage){
currentPageSet=currentPageSet+1;
nextPointer=maxRecordShow*currentPageSet;
prevPointer=nextPointer-(maxRecordShow-1);
previousPageSet=currentPageSet-1;
}
$(“pg”).innerHTML=currentPageSet;
$(“total”).innerHTML=maxTotalPage;
showNextPage(prevPointer,nextPointer);
}

function prevList(){
if(previousPageSet > 0 && previousPageSet<maxTotalPage){
previousPageSet=previousPageSet-1;
currentPageSet=previousPageSet+1;
nextPointer=maxRecordShow*currentPageSet;
prevPointer=nextPointer-(maxRecordShow-1);
}
showPrevPage(prevPointer,nextPointer);
$(“pg”).innerHTML=currentPageSet;
$(“total”).innerHTML=maxTotalPage;
}

function showNextPage(start,end){
//hide the current row set
if(start>maxRecordShow){
var st=start-1;
var en=st-(maxRecordShow-1);
for(i=st;i>=en;i–){
var id=”row”+i;
if($(id)){
$(id).style.display=”none”
}
}
}
//show the next row set
for(i=start;i<=end;i++){
var id=”row”+i;
if($(id)){
$(id).style.display=””
}
}
}

function showPrevPage(start,end){
//hide the current row set
for(i=start;i<=end+maxRecordShow;i++){
var id=”row”+i;
if($(id)){
$(id).style.display=”none”
}
}
//show the previous row set
for(i=end;i>=start;i–){
var id=”row”+i;
if($(id)){
$(id).style.display=””;
}
}
}

//@DummyMethod TO PUT RECORDS IN TABLE [in JSP just load the data from the server in the table dont use this method]
function putDummyRecords(){
var obj1=document.getElementById(“recTbl”);
var obj = obj1.getElementsByTagName(‘tbody’)[0];
for(i=1;i<=totalRecordInDB;i++){
var tr=document.createElement(“tr”);
var td1=document.createElement(“td”);
td1.appendChild(document.createTextNode(“Row”+i+””));
var td2=document.createElement(“td”);
td2.appendChild(document.createTextNode(” LLLLL “));
var td3=document.createElement(“td”);
td3.appendChild(document.createTextNode(” AAAAAA “));
var td4=document.createElement(“td”);
td4.appendChild(document.createTextNode(” ZZZZZZ “));
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.setAttribute(“id”,”row”+i);
if(i > maxRecordShow){
tr.style.display=”none”;
}
obj.appendChild(tr);
}
}

// put dummy records in table
putDummyRecords();

// manage records on load
showNextPage(1,maxRecordShow);

</SCRIPT>

PS: Include proptype libs(effect.js, scriptaculous.js, prototype.js)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s