Post
Ask Question

Pagination of GridView using JQuery and JavaScript

 
Prerequisites
  • HTML
  • JavaScript
  • JQuery
Content
  1. How it works (explanation)
  2. HTML
  3. JQuery
How does it work?
 
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:
  1. Users will have time to review each record individually and need not to scroll the page for all the records.
     
  2. This technique will not reduce the 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 than the actual Page Size.
HTML
  1. <body>  
  2.    <div class="CSSTableGenerator" >  
  3.       <table ID="myTable">  
  4.          <tr>  
  5.             <td>Title 1</td><td>Title 2</td><td>Title 3</td>  
  6.          </tr>  
  7.          <tr><!-- Repeat The Rows no. of time -->  
  8.             <td>Row 1</td><td>Row 1</td><td>Row 1</td>  
  9.          </tr>  
  10.       </table>  
  11.    </div>  
  12.    <div align="center">  
  13.        <a href="#" id="prev"> < </a>  
  14.        <span id="PageIndex"></span>  
  15.        <a href="#" id="next"> > </a>  
  16.     </div>  
  17. </body> 
JQuery 
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  2. <script>  
  3. var ps=5;            // is the Page Size  
  4. var cp=0;            // is Current Page Index  
  5. var table;           // is Object in which [HTML OBJECT] of the table  
  6. var tr;              // is Object in which [HTML OBJECT] of the tr  
  7. var totalPages=0;    // is Total No of Pages  
  8. var anc ='<a href="javascript:SetPageIndex(NUMBER);">NUMBER</a>' //is Anchor for page Indexing which calls a  
  9.                                                                  //Javascript function SetPageIndex which requires a index no to   
  10.                                                                  //be ed.  
  11. var htmlpage ='';    // is Object used to store list of HTML anchors  
  12. $(document).ready(function(){  
  13.     table = $('#myTable').get(0);         //On Page Load 1st get the Table to be paged.  
  14.     tr = $('#myTable tr').get();          //Get an Array of <tr> i.e table rows in the table.  
  15.     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.  
  16.     for(var i=0;i<totalPages;i++)         //Create Anchors for paging by replacing the number in the anc string with value of i  
  17.     {                                     //in for loop  
  18.        htmlpage+=anc.replace('NUMBER',i).replace('NUMBER',i+1);  
  19.     }  
  20.     $('#PageIndex').html(htmlpage);       //Now Add the htmlpage variable to the innerHtml of the div with id #PageIndex  
  21.     run();                                //Call the function run()  
  22.     Showbtn();                            //Call the function Showbtn()  
  23.   
  24.     $("#prev").click(function(e){         //Click Event of button #prev  
  25.       cp--;                               //On Click of this btn the value of the variable cp is decremented by 1  
  26.       run();                              //The run function then on the new value of variable cp determines the rows that has to  
  27.                                           //be displayed  
  28.       Showbtn();                          //The Showbtn function shows the enable and disables the navigation btn #next and #prev  
  29.                                           //on the bases of the value in variable cp.  
  30.       e.preventDefault();                 //Prevents the default event of the function.  
  31.    });  
  32.    $("#next").click(function(e){          //Click Event of button #next  
  33.       cp++;                               //On Click of this btn the value of the variable cp is incremented by 1  
  34.       run();  
  35.       Showbtn();  
  36.       e.preventDefault();  
  37.    });  
  38. });  
  39. var counter  
  40. 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  
  41. {  
  42.    cp=counter;  
  43.    run();  
  44.    Showbtn();  
  45.   
  46. }  
  47.   
  48. function run(){                           // The function run() is the function that does the heavy lifting.  
  49.    for(var i=0;i<tr.length;i++)           // Initially it hides all the tr in the table  
  50.    {  
  51.       $(tr[i]).css("display","none");     //hiding  
  52.    }  
  53.    var startIndex=ps*cp;                  //once all the tr is hidden the start index is calculated by multiplying variables  
  54.                                           //ps and cp i.e page size and current page index.  
  55.    var endIndex=startIndex+ps;            //endIndex is calculated by adding the page size to the start index.  
  56.    if(startIndex==0)                      //now display only the records between the var startIndex and endIndex.  
  57.    {  
  58.       for(var i=startIndex;i<endIndex+1;i++)  
  59.       {  
  60.          $(tr[i]).css("display","block");  
  61.       }  
  62.    }  
  63.    else  
  64.    {  
  65.       for(var i=startIndex;i<endIndex;i++)  
  66.       {  
  67.          $(tr[i]).css("display","block");  
  68.       }  
  69.    }  
  70.    $(tr[0]).css("display","block");      // Code to display only the header...  
  71.    $("#myTable thead").css("display","block");  
  72. }  
  73.   
  74. function Showbtn()                      //this funtion shows and hides the navigation button   
  75. {  
  76.    $("#prev").show();  
  77.    $("#next").show();  
  78.    if(cp==0)                            //if cp == 0   it hides the btn #prev and shows the btn #next  
  79.    {  
  80.       $("#prev").hide();  
  81.       $("#next").show();  
  82.    }  
  83.    if(cp==(totalPages-1))               //if cp == (totalPage-1) it hides the btn #next and shows the btn #prev  
  84.    {  
  85.       $("#prev").show();  
  86.       $("#next").hide();  
  87.    }  
  88. }  
  89.   
  90.   
  91. </script> 


Similar Articles