Simple Example of Pagination Using jQuery and Bootstrap

Pagination is a very useful feature of any application. This tutorial help to create beautiful pagination on HTML table listing using jQuery and bootstrap. Bootstrap is a powerful CSS framework to create beautiful layout and HTML element using pre-defined css class.

There is a lot of jQuery Plugin available that provides pagination feature on HTML table. This tutorial help to create pagination on HTML table using Bootstrap pagination Navigation.I can create custom jQuery code that handle next, prev page etc pagination features but I will use twbs-pagination jQuery plugin library.

I am using Bootstrap powered jQuery pagination plugin and integrate with bootstrap table listing.Its very easy to use and simple to integrate.The only dependencies of this plugin is bootstrap css and jQuery 1.7+ library file.

Also Checkout other useful jQuery tutorials,

• ample 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 help to show the subset of records using some parameters. This bootstrap pagination will look like below,

• «
• 1
• 2
• 3
• 4
• 5
• »

Simple Bootstrap Pagination Using jQuery

We will show first page data at the time of load HTML listing and generate pagination navigation bar using Bootstrap pagination css. We will set some global java-script variable for manipulation display data and page.

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

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

1 2 3

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <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 local libs path and rest of the dependent libraries file have CDN path.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<table id="employee" class="table table-bordered table table-hover" cellspacing="0" width="100%">      <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">       <ul id="pagination" class="pagination-sm"></ul> </div>

I have created 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 create ajax jquery method to get data from rest call and store into global js variable.We will add folowiing code into index.html file.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var $pagination = $('#pagination'), totalRecords = 0, records = [], displayRecords = [], recPerPage = 10, page = 1, totalPages = 0; $.ajax({       url: "http://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 variable, global variable 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 formula Ceil(total fetch records/how much records display at once).

Step 4: We will append tr into HTML body based on displayRecords variable.We will create below javascript method and added into index.html file.

1 2 3 4 5 6 7 8 9 10 11

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

I am first creating empty table body and generated tr element with data records.Finally each tr element append with HTML table tbody.

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

1 2 3 4 5 6 7 8 9 10 11 12 13

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 for generate pagination link buttons and visiblePages for show number of pages nav link at once.This jQuery pagination plugin providing onPageClick() callback method to generate chunk of data to display. JavaScript slice() method use to create subset of array using start and end index of array.

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

You can download source code and Demo from below link.

  LIVE DEMO

source : https://www.js-tutorials.com/jquery-tutorials/simple-example-pagination-using-jquery-bootstrap/