Create Pagination on HTML table using JavaScript and JQuery

Hi All,

Today we will learn about how can we create pagination on html table using JavaScript and JQuery. so lets start.

HTML table code:

<h2>HTML Table</h2>

<table id="paginateTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<input type="button" value="paginate Table" onclick="paginate('#paginateTable',2)">

Javascript:

function paginate(tableName, RecordsPerPage) {
    $('#nav').remove();
    $(tableName).after('<div id="nav"></div>');
    var rowsShown = RecordsPerPage;
    var rowsTotal = $(tableName + ' tbody tr:has(td)').length;
    var numPages = rowsTotal / rowsShown;
    for (i = 0; i < numPages; i++) {
        var pageNum = i + 1;
        $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
    }
    $(tableName + ' tbody tr:has(td)').hide();
    $(tableName + ' tbody tr:has(td)').slice(0, rowsShown).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function() {

        $('#nav a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $(tableName + ' tbody tr:has(td)').css('opacity', '0.0').hide().slice(startItem, endItem).
        css('display', 'table-row').animate({
            opacity: 1
        }, 300);
    });
}

for more information see this :
Pagination on HTML table

Regards,
Ankit Gupta