HTML Table Pagination Plugin – Paging

Table
Demo    Download
Client-side HTML Table Pagination Plugin with jQuery - Paging
File Size: 3.74 KB
Views Total: 148 views
Last Update:October 4, 2020
Publish Date: October 4, 2020
Official Website: Go to website
License: MIT

A Free jQuery Plugin with “paging.js” for adding client-side pagination to large Html table that you can specify the number of rows to show per page. It gets the table rows, divides them with the given value, and generates pagination for the table. The is a lightweight jQuery plugin that helps you create pagination for the HTML table. 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.

How to use it:

1. Load the necessary jQuery, jQuery UI and Bootstrap CSS.

<script src="ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/3.3.2/css/bootstrap.min.css">

2. Load the paging.js script after jQuery library.

<script src="paging.js"></script> 

3. Call the plugin on the existing Html table and setup the the number of rows you wish to show per page.

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

4. After that, create an HTML table with a unique id "tableData".

<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>

5. Style the table pagination in the CSS.

.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;
}

6. Default settings.

$('#tableData').paging({

limit: 5,
rowDisplayStyle: 'block',
activePage: 0,
rows: []

});

Done


Nola Arney

Nola Arney is a full stack web developer who has worked at companies of various shapes and sizes, and with technologies just as diverse. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.