HTML Table Pagination using jQuery

The “paging.js” is a lightweight jQuery plugin that helps you create pagination for the HTML table. It gets the table rows, divides them with the given value, and generates pagination for the table. The rendered pagination can be style/customized with CSS.

This plugin is easy to implement to divide rows into paging for heavy content tables. Basically, you just need to add a unique id in your existing HTML table and initialize the plugin with that id selector. Then, this plugin creates pagination and inserts it after the table.

Moreover, you can control its functionality in the configuration options. Likewise, you can set an active page, set pages limit, and pagination display as a block, flexbox, or inline-block.

How to Create Pagination for HTML Table

This table pagination project requires jQuery, jQuery UI, and Bootstrap CSS (for paging styles only). So, load all these necessary required files into your HTML page.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

After that, create an HTML table with a unique id "tableData" and define the following classes mentioned below. If you have already a table element, just define its id and add a class name "table-striped". Therefore, the following is the example of an HTML table, you can copy/paste it and insert your table data inside it.

<table id="tableData" class="table table-bordered table-striped">
   <thead>
      <tr>
         <th>id</th>
         <th>first name</th>
         <th>surname</th>
         <th>number</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Frank</td>
         <td>Shoulder</td>
         <td>1246</td>
      </tr>
      <tr>
         <td>2</td>
         <td>John</td>
         <td>Jameson</td>
         <td>4564</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Philip</td>
         <td>Jenkins</td>
         <td>4456</td>
      </tr>
      <tr>
         <td>4</td>
         <td>Maria</td>
         <td>Carlston</td>
         <td>4456</td>
      </tr>
      <tr>
         <td>5</td>
         <td>Julia</td>
         <td>Tampelton</td>
         <td>1246</td>
      </tr>
      <tr>
         <td>6</td>
         <td>Jane</td>
         <td>Conor</td>
         <td>4456</td>
      </tr>
      <tr>
         <td>7</td>
         <td>Susan</td>
         <td>Crane</td>
         <td>1246</td>
      </tr>
      <tr>
         <td>8</td>
         <td>Lucas</td>
         <td>Fenric</td>
         <td>4456</td>
      </tr>
      <tr>
         <td>8</td>
         <td>Mark</td>
         <td>Fenric</td>
         <td>4456</td>
      </tr>
      <tr>
         <td>9</td>
         <td>Hilde</td>
         <td>Mayer</td>
         <td>4456</td>
      </tr>
      <tr>
         <td>10</td>
         <td>John</td>
         <td>Tron</td>
         <td>1246</td>
      </tr>
      <tr>
         <td>11</td>
         <td>Hans</td>
         <td>Stark</td>
         <td>4564</td>
      </tr>
   </tbody>
</table>

Now, download this paging project and load the “paging.js” file (from the downloaded directory) into your webpage. Similarly, initialize the plugin in the jQuery document ready function.

<!-- Paging JS -->
<script type="text/javascript" src="paging.js"></script> 
<script type="text/javascript">
            $(document).ready(function() {
                $('#tableData').paging({limit:5});
            });
</script>

The paging JS renders the HTML structure for the table pagination dynamically. So, you don’t need to create an HTML structure/container for pagination. Therefore, you can highly customize paging numbers using the following mentioned classes. Finally, add the following CSS styles for pagination and done.

.paging-nav {
  text-align: right;
  padding-top: 2px;
}

.paging-nav a {
  margin: auto 1px;
  text-decoration: none;
  display: inline-block;
  padding: 1px 7px;
  background: #91b9e6;
  color: white;
  border-radius: 3px;
}

.paging-nav .selected-page {
  background: #187ed5;
  font-weight: bold;
}

.paging-nav,
#tableData {
  width: 400px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

Advanced Configuration Options

You can use the following available options to customize the working of the paging plugin.

$('#tableData').paging({
	limit : 5,
});

$('#tableData').paging({
	rowDisplayStyle : 'block',
});

$('#tableData').paging({
	activePage : 0,
});

$('#tableData').paging({
	rows : [],
});

You have done it! Hopefully, you’ve successfully created pagination for the HTML table using this jQuery plugin. Don’t hesitate to comment below if you have any questions.