Pagination of GridView using JQuery and JavaScript

Ajith Mohan
Jan 16, 2015
26.1k
0
1
Article

Paging.zip

Prerequisites

HTML
JavaScript
JQuery

Content

How it works (explanation)
HTML
JQuery

How it works

The Pagination or Paging I have implemented is not exactly the same most people might think it is.

Here using JQuery I am hiding all the data first and then display them as and when necessary.

So some key points that should be considered before using it:

User will have time to review each record individually and need not to scroll the page for all the records.
This technique will not reduces rendering time of the page because the jquery initializes once its the page is completely rendered.

E.g: If a DataGrid or Table contains has 100 records. The 100 records will first be rendered on the page. i.e it consumes the time required to render 100 records then the actual Page Size.

HTML

<body>
   <div class="CSSTableGenerator" >
      <table ID="myTable">
         <tr>
            <td>Title 1</td><td>Title 2</td><td>Title 3</td>
         </tr>
         <tr>
            <td>Row 1</td><td>Row 1</td><td>Row 1</td>
         </tr>
      </table>
   </div>
   <div align="center">
       <a href="#" id="prev"> < </a>
       <span id="PageIndex"></span>
       <a href="#" id="next"> > </a>
    </div>
</body>

JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var ps=5;            // is the Page Size
var cp=0;            // is Current Page Index
var table;           // is Object in which [HTML OBJECT] of the table
var tr;              // is Object in which [HTML OBJECT] of the tr
var totalPages=0;    // is Total No of Pages
var anc ='<a href="javascript:SetPageIndex(NUMBER);">NUMBER</a>' //is Anchor for page Indexing which calls a
//Javascript function SetPageIndex which requires a index no to
                                                               //be ed.
var htmlpage ='';    // is Object used to store list of HTML anchors
$(document).ready(function(){
    table = $('#myTable').get(0);         //On Page Load 1st get the Table to be paged.
    tr = $('#myTable tr').get();          //Get an Array of <tr> i.e table rows in the table.
    totalPages = Math.ceil(tr.length/ps); //Get count of pages that are required to display complete data by dividing the total                                           //no of rows with the page size.
    for(var i=0;i<totalPages;i++)         //Create Anchors for paging by replacing the number in the anc string with value of i
    {                                     //in for loop
       htmlpage+=anc.replace('NUMBER',i).replace('NUMBER',i+1);
    }
    $('#PageIndex').html(htmlpage);       //Now Add the htmlpage variable to the innerHtml of the div with id #PageIndex
    run();                              //Call the function run()
    Showbtn();                            //Call the function Showbtn()

    $("#prev").click(function(e){         //Click Event of button #prev
      cp--;                               //On Click of this btn the value of the variable cp is decremented by 1
      run();                              //The run function then on the new value of variable cp determines the rows that has to
//be displayed
Showbtn(); //The Showbtn function shows the enable and disables the navigation btn #next and #prev
                                          //on the bases of the value in variable cp.
      e.preventDefault();                 //Prevents the default event of the function.
   });
   $("#next").click(function(e){          //Click Event of button #next
      cp++;                               //On Click of this btn the value of the variable cp is incremented by 1
      run();
      Showbtn();
      e.preventDefault();
   });
});
var counter
function SetPageIndex(counter)            //This function is called on the list of anchors. It set the value of the variable cp                                           //with the value of the page index to be displayed
{
   cp=counter;
   run();
   Showbtn();

}

function run(){                           // The function run() is the function that does the heavy lifting.
   for(var i=0;i<tr.length;i++)         // Initially it hides all the tr in the table
   {
      $(tr[i]).css("display","none");     //hiding
   }
   var startIndex=ps*cp;                  //once all the tr is hidden the start index is calculated by multiplying variables
                                          //ps and cp i.e page size and current page index.
   var endIndex=startIndex+ps;            //endIndex is calculated by adding the page size to the start index.
   if(startIndex==0)                      //now display only the records between the var startIndex and endIndex.
   {
      for(var i=startIndex;i<endIndex+1;i++)
      {
         $(tr[i]).css("display","block");
      }
   }
   else
   {
      for(var i=startIndex;i<endIndex;i++)
      {
         $(tr[i]).css("display","block");
      }
   }
   $(tr[0]).css("display","block");      // Code to display only the header...
   $("#myTable thead").css("display","block");
}

function Showbtn()                      //this funtion shows and hides the navigation button
{
   $("#prev").show();
   $("#next").show();
   if(cp==0)                            //if cp == 0 it hides the btn #prev and shows the btn #next
   {
      $("#prev").hide();
      $("#next").show();
   }
   if(cp==(totalPages-1))               //if cp == (totalPage-1) it hides the btn #next and shows the btn #prev
   {
      $("#prev").show();
      $("#next").hide();
   }
}

</script>