Pager on Html Table - jQuery Plugin

Hello,

Recently in a project, I needed to put pager on a html table. Now this table was a simple html table populated by jQuery, hence I couldn't use any server control. I searched the internet for available plugins, but they gave so much more :D. My requirement was a simple pager for my html table. So, i developed it. Hopefully, it will be useful to you all.

 #Note: Working model is attached at below link.

Link to download =>  Pager on Html Table - jQuery Plugin

Point to Note (before you use it) :   You should have reference to jQuery on the page. As the code uses jQuery 

1. The html of the table should have a <tbody> tag for my plugin to work directly. This I have kept because that's the standard way.However, you can change the code. *I have explained in below steps [A1]

HTML

<table id="dtExpriments"> 
     <thead><tr><td></td></thead> 
     <tbody><tr><td></td></tbody> 
</table>

2. Html for the Pager :

    Just below the table (or any where you want on the page) put the pager html as below.

HTML

<div id="navContainer"> 
      <ul class="pagination nav navbar-right" id="footerPagination"></ul> 
      <span id="prevFirstLink" style="display: none;"></span> 
      <span id="prevLastLink" style="display: none;"></span> 
</div>

3. Calling the pager :

     #Note - You can call it simply on load or improvise it as per your requirement.

     In my case, I have called it on the click of a button after the table is populated. (see attachment)

JavaScript

$(document).ready(function(){ 
 
     //apply pager plugin on the html Table 
     $('#dtExpriments').applyPager({ 
        ItemsPerPage: 6, 
        MAXPAGES: 5, 
        ContainerDivId: 'navContainer', 
        SpanPrevFirstId: 'prevFirstLink', 
        SpanPrevLastId: 'prevLastLink' 
     }); 
});

//** Appendix **/

A1 :

    If you table doesn't have <tbody> and <thead> i.e. it's simple html table with <tr> only.

    find code like this => $('#' + tableId + ' tbody tr

    in the js file (jQuery_html_table_Pager_plugin_v1.0.js) remove 'tbody' from everywhere.