Simple Example of Pagination Using jQuery and Bootstrap

Pagination is an essential feature for any web application, and in this article, we’ll demonstrate how to create an attractive HTML table with page numbers using jQuery and Bootstrap.

Bootstrap is a strong CSS frame for creating stunning layout and HTML elements with the CSS class

There is a number of jQuery Plugin that supports HTML table pagination. This guide helps to build HTML table pagination using Bootstrap navigation.

I’ll create custom jQuery code for features like navigating to the next page or the previous page, but for this purpose, I’ll utilize the twbs-pagination jQuery plugin library.

I am using Bootstrap powered jQuery pagination plugin and integrating it with a Bootstrap table listing. It’s very easy to use and simple to integrate. This plugin has minimal dependencies, requiring only the Bootstrap CSS and jQuery 1.7+ library files.

Also Checkout other useful jQuery tutorials,

• Simple Example of Pagination Using jQuery and Bootstrap
• Multi Step Form with Progress Bar using jQuery and Bootstrap CSS
• Simple Example of Hide, Show and Toggle Element Using jQuery
• Dynamically Add and Remove rows in a Table Using jquery

Pagination helps to display the subset of records with certain parameters. This page looks like the bootstrap below :

Simple Bootstrap Pagination Using jQuery

While loading the HTML list, we’ll initially display data for the first page and create a pagination navigation bar using Bootstrap’s pagination CSS. To control the display of data and pages, we will establish specific global JavaScript variables.

I have created pagination-sample folder and created a new index.html file into this folder, I will write all the below steps code into this file.

Step 1: Downloaded twbs-pagination jQuery plugin and included js file, cdn bootstrap path into the head section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.twbsPagination.min.js"></script>

There is no CDN available for twbs-pagination jQuery plugin, so I have included the local libs path and the rest of the dependent libraries files have CDN paths.

Step 2: Create a HTML table listing into index.html file and added pagination container div element.

<table id="employee" class="table table-bordered table table-hover" width="100%" cellspacing="0"><colgroup><col /><col /><col /></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
<tbody id="emp_body"></tbody>
</table>
<div id="pager"></div>

I have created an HTML table listing and pagination nav bar HTML element, I will append data with HTML table tbody and apply pagination on #pagination div.

Step 3: We will implement an AJAX jQuery method to retrieve data from a REST API call and store it in a global JavaScript variable. The following code snippet will be added to index.html file.

var $pagination = $('#pagination'),
totalRecords = 0,
records = [],
displayRecords = [],
recPerPage = 10,
page = 1,
totalPages = 0;
$.ajax({
      url: "https://dummy.restapiexample.com/api/v1/employees",
      async: true,
      dataType: 'json',
      success: function (data) {
                  records = data;
                  console.log(records);
                  totalRecords = records.length;
                  totalPages = Math.ceil(totalRecords / recPerPage);
                  //apply_pagination();
      }
});

As you can see, I have created some global JavaScript variables, global variables accessible only into this file.I have comment apply_pagination() method, later on this tutorial, we will un-comment this method.

The JavaScript variable are:

• $pagination : Object of pagination div container.
• totalRecords : The total number of records fetch from database.
• records : The total records object of array.
• displayRecords : The array of object which will display into HTML table.
• recPerPage : The records per page will show into table.
• page : The current page number.
• totalPages : The total pages based on records.

I have count totalPages of records using the formula Ceil(total fetch records/how much records display at once).

Step 4: We will append ‘tr’ elements to the HTML body based on the ‘displayRecords’ variable. Below is the JavaScript method we will create and add to index.html file.

function generate_table() {
      var tr;
      $('#emp_body').html('');
      for (var i = 0; i < displayRecords.length; i++) {
            tr = $('');
            tr.append("" + displayRecords[i].employee_name + "");
            tr.append("" + displayRecords[i].employee_salary + "");
            tr.append("" + displayRecords[i].employee_age + "");
            $('#emp_body').append(tr);
      }
}

I’ll begin by creating an empty table body and generating ‘tr’ elements with data records. Finally, I’ll append each ‘tr’ element to the HTML table’s ‘tbody’.

Step 5: We will create pagination parameters and pass them to twbsPagination() instance.

function apply_pagination() {
      $pagination.twbsPagination({
            totalPages: totalPages,
            visiblePages: 6,
            onPageClick: function (event, page) {
                  displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
                  endRec = (displayRecordsIndex) + recPerPage;
                 
                  displayRecords = records.slice(displayRecordsIndex, endRec);
                  generate_table();
            }
      });
}

I am passing totalpages variable to generate pagination link buttons and visiblePages to show the number of pages nav link at once.

This jQuery pagination plugin provides onPageClick() callback method to generate chunks of data to display. JavaScript slice() method used to create a subset of the array using start and end index of the array.

displayRecordsIndex variable used to set the start index of display records and endRec to end index of display records array.

You can download the source code and Demo from the below link: