HTML Table Pagination Plugin – Paging

Table
Demo    Download
Client-side HTML Table Pagination Plugin with jQuery - Paging
File Size: 3.74 KB
Views Total: 740 views
Last Update:July 25, 2016
Publish Date: January 18, 2015
Official Website: Go to website
License: MIT
Plugin Author: mz0lee

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:

Load the necessary jQuery, jQuery UI and Bootstrap CSS.

Load the Java Scripted and CSS files into the existing code.

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

Load the paging.js script after jQuery library.

In this, we are loading the Java Scripted files into the existing code.

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

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

Here we call an HTML table with the data and set it up with the required number of rows to be loaded into the table. In this, we loaded 5 rows.

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

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

Here we are creating a table with data.
We created a tag table with the id named tabledata and the class.
<tr>: This tag represents the Table Row
<th>: This tag represents the Table Header<td>: This tag represents the Table Data

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

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

Default settings.

$('#tableData').paging({

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

});

Done

List Of Version :

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.

Related jQuery Plugins