Using a flexible custom AJAX table pagination system in Javascript

Introduction

When we think of a Table which loads data dynamically from database,we definately need a pagination system. Most of the common web development environments have that facility of their own.

However,Sometimes in AJAX web development process we need a seperate and flexible table pagination system that can be appended to the AJAX table itself.

What are the materials of Ajax Pagination ?

Ajax enabled table pagination is a system to asyncronously paginate a AJAX table.It's a simple HTML set of elements which is controlled by

-> Client side Javascript
-> An Ajax Engine(Prototype,Atlas,ACE etc.)
-> A server side Script(PHP,C#.Net,Ferite etc.)

Let's Start:

Some HTML styles are needed for that look

<style>

a.button2:link, a.button2:visited
    {
        border-bottom:solid 1px  #999999;
        border-right:solid 1px #999999;
        text-align:center;
        color:#000000;
        width:3px;
        padding:0px 3px 0px 3px;
        margin-right:2px;
    }
a.button2:active
    {
        border-bottom:solid 1px #D3D3D3;
        border-right:solid 1px #D3D3D3;
    }
.button2_active
    {
        background-color:#E0E0E0;
        border-bottom:solid 1px  #999999;
        border-right:solid 1px #999999;
        text-align:center;
        color:#000000;
        width:3px;
        padding:0px 3px 0px 3px;
        margin-right:2px;
    }
/* Custom text */
p, div 
    {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
    }

</style>

The HTML code renderd for pagination totally dybnamic.No manual HTML coding is required here.

Code Section :

We need a Javascript file for doing it,or can add that directly to page file. While loading the page, we need some basic informations,and initializations to load the table and paginate

//  initializations

var fpage = 1;        //first page     
var lpage=3;          // last page number by default can be viewed( 1-2-3 Next> )
var actpage = 1;      // active page
var pagelimit = 4;    // number of rows showed in table
var rows;             // Total number of rows returned by query
var totalpage =1;     // total number of pages in pagination
var currentpage = 1;  // current paginated page

var userID = 10 // sample user ID for which the table will load(i.e Identifier)

Then we need to call the loadPage() function.Remember that this function needs to be called when the pages loads. So put where it gets called while page loading.

function loadPage()
{
   
  getRowCount(userID);
  loadTable(pagelimit*(currentpage-1));
  
}

getRowCount is the function to get all the rows that are affected by the Query from database and sets the row variable.And loadTable loads the Table

function getRowCount(msg)
{
   var tmp = "uid="+msg;
  // Invoking AJAX Request with tmp Param, get the response in getNumberOfRows() function
  
}

function getNumberOfRows(response,args)
{
 var result = response.text.split("<"); // ommiting the HTML that AJAX returns as response text
 var rowcount = result[0].split(",");  // splitting with ',' because from server for example rows,6         <br> //is returned,we need the 6 that is the number of rows affected
 rows=rowcount[1]; 
  
 if(rows > pagelimit){
    pageRange();
    renderPagination();
 }
}

function pageRange()
{
 
 if(rows>pagelimit)
  {
    totalpage=Math.ceil(rows/pagelimit); 
  }
  else
   totalpage =1;
   
   
}

 function renderPagination()
 {
   
 
    var subcontent='',content='';
    
    if(totalpage<=lpage)lpage = totalpage;
    
    if(fpage>1 && totalpage >=lpage )subcontent+=linkPrevious(fpage-1);
    for(var i=fpage;i<=lpage;i++)
    {
        if(i==actpage)subcontent+= spanActive(i);
        else
        subcontent+=linkGeneral(i);
    }
    subcontent+=linkNext(actpage+1);
    content =divMain(subcontent);
          
    document.getElementById('pagilbl').innerHTML = content;      
    //pagilbl is a label where AJAX loads the paginations HTML set
 } 

Here are the functions which will make the pagination set

function linkGeneral(d) {
        return  "<a href=\"javascript:getList("+d+")\" class=\"button2\">"+d+"</a>\n";
}
     
function spanActive(d) {
        return  "<span class=\"button2_active\">"+d+"\n";
}
     
function linkNext(d) {
        return  "<a href=\"javascript:updateNext("+d+")\" class=\"button2\">Next</a>\n";
}     
     
function linkPrevious(d) {
        return  "<a href=\"javascript:updatePrev("+d+")\" class=\"button2\">Previous</a>\n";
}     
          
function divMain(d){
     
     return "<div >"+d+"</div>\n";
   
 }    

When Next and Previous buttons are activated we need some controller functions to paginate. Note that the previous button will not appear untill we cross the last page limit.Here are the functions to control Next and previous

function updateNext(counter)
{

  if(counter > lpage && totalpage >lpage )
  {
    fpage = fpage+1;
    lpage = lpage+1;
  }
  if(counter <= totalpage )
  getList(counter);
}

function updatePrev(counter)
{
  actpage = actpage-1;
  if(actpage < fpage )
  {
    fpage--;
    lpage--;
  } 
  getList(actpage);
}

For the other buttons other that Next and Previous we need to call the get List function to load the current set of rows

function getList(currnum)
{
  
  currentpage=currnum;
  actpage = currnum;
  
  loadPage();
}

You may want to use the loadTable() funtion in AJAX to get the table

function loadTable(offset)
{
  var tmp = "usid="+userID+"&lmt="+pagelimit+"&off="+offset;
   // Invoking AJAX Request with tmp Param, get the response in getResponse() function
}

function getResponse(response,args)
{
  document.getElementById('tableLbl').innerHTML = response.text;
   // tablelbl is the place holder of the table returned by Ajax
}

This code may not be the paste and use kind of code, how ever the Javascript code can be used inside your code with gathering and aranging these code and there is your pagination system ready.