Home How to Create Pagination on Table Data Using jQuery and Bootstrap 4
How To

How to Create Pagination on Table Data Using jQuery and Bootstrap 4

Table structure is an easy way to display data on the webpage. However, if we have too much data to display we have to apply pagination for easiness. jQuery makes it effortless to add a pagination into a data table.

jQuery Data Table

jQuery is the most popular javascript library available online. It has gained its popularity due to its extraordinary functionality and easy implementation with just a few lines of code.

jQuery data table provides pagination, shorting, and searching as a default in data tables. just follow the below steps to create your first jQuery data table with pagination.

Step 1: Include the jQuery & Bootstrap CSS & JS

First, we need to include the jQuery & bootstrap libraries to our working file. Here we are going to include a CDN link of jQuery and Bootstrap as given below.

CSS

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Bootstrap DataTable CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">

JavaScript

<!-- jQuery js-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- jQuery Datatable js -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap Datatable js -->    
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

Step 2: Create a Data Table

Here, we are going to use a dummy table to understand but you can also create a dynamic table from your database.

We have to give an id to select the data table via jQuery. We have set example_table as an id of our table.

<table id="example_table" class="table">
<thead>
<tr>
 <th>id</th>
 <th>name</th>
 <th>number</th>
</tr>
</thead>
<tbody>
<tr>
 <td>1</td>
 <td>Colt Adams</td>
 <td>16740326 5320</td>
</tr>
<tr>
 <td>2</td>
 <td>Ivan Guzman</td>
 <td>16690719 5330</td>
</tr>
<tr>
 <td>3</td>
 <td>Elijah Christian</td>
 <td>16231202 4728</td>
</tr>
<tr>
 <td>4</td>
 <td>Vladimir Barrera</td>
 <td>16730519 2572</td>
</tr>
<tr>
 <td>5</td>
 <td>Hector Campos</td>
 <td>16821016 9515</td>
</tr>
<tr>
 <td>6</td>
 <td>Axel Deleon</td>
 <td>16030604 5196</td>
</tr>
<tr>
 <td>7</td>
 <td>Wyatt Mcdonald</td>
 <td>16020425 8289</td>
</tr>
<tr>
 <td>8</td>
 <td>Nolan Larsen</td>
 <td>16250607 8530</td>
</tr>
<tr>
 <td>9</td>
 <td>Thaddeus Leon</td>
 <td>16111219 4343</td>
</tr>
<tr>
 <td>10</td>
 <td>Odysseus Levine</td>
 <td>16151004 8943</td>
</tr>
<tr>
 <td>11</td>
 <td>Oscar Huffman</td>
 <td>16860328 2628</td>
</tr>
<tr>
 <td>12</td>
 <td>Kennedy Todd</td>
 <td>16120819 3399</td>
</tr>
<tr>
 <td>13</td>
 <td>Cyrus Erickson</td>
 <td>16210127 7537</td>
</tr>
<tr>
 <td>14</td>
 <td>Vaughan Mack</td>
 <td>16281009 7002</td>
</tr>
<tr>
 <td>15</td>
 <td>Jamal Gomez</td>
 <td>16710207 1292</td>
</tr>
<tr>
 <td>16</td>
 <td>Dennis Burns</td>
 <td>16770501 7585</td>
</tr>
<tr>
 <td>17</td>
 <td>Marvin Sargent</td>
 <td>16251106 5001</td>
</tr>
<tr>
 <td>18</td>
 <td>Elijah Clay</td>
 <td>16960329 4548</td>
</tr>
<tr>
 <td>19</td>
 <td>Gannon Holder</td>
 <td>16081106 1498</td>
</tr>
<tr>
 <td>20</td>
 <td>Dustin Olsen</td>
 <td>16130603 9015</td>
</tr>
</tbody>
</table>

Step 3: Create Pagination

Finally, we have to add a small piece of jQuery code as mentioned below to generate pagination on the data table.

$(document).ready( function () {
    $('#example_table').DataTable();
} );

Full code

<!doctype html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Bootstrap DataTable CSS -->
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
    <title>Bootstrap & jQuery DataTable</title>
  </head>
  <body>
    <table id="example_table" class="table">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>number</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Colt Adams</td>
        <td>16740326 5320</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Ivan Guzman</td>
        <td>16690719 5330</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Elijah Christian</td>
        <td>16231202 4728</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Vladimir Barrera</td>
        <td>16730519 2572</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Hector Campos</td>
        <td>16821016 9515</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Axel Deleon</td>
        <td>16030604 5196</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Wyatt Mcdonald</td>
        <td>16020425 8289</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Nolan Larsen</td>
        <td>16250607 8530</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Thaddeus Leon</td>
        <td>16111219 4343</td>
    </tr>
    <tr>
        <td>10</td>
        <td>Odysseus Levine</td>
        <td>16151004 8943</td>
    </tr>
    <tr>
        <td>11</td>
        <td>Oscar Huffman</td>
        <td>16860328 2628</td>
    </tr>
    <tr>
        <td>12</td>
        <td>Kennedy Todd</td>
        <td>16120819 3399</td>
    </tr>
    <tr>
        <td>13</td>
        <td>Cyrus Erickson</td>
        <td>16210127 7537</td>
    </tr>
    <tr>
        <td>14</td>
        <td>Vaughan Mack</td>
        <td>16281009 7002</td>
    </tr>
    <tr>
        <td>15</td>
        <td>Jamal Gomez</td>
        <td>16710207 1292</td>
    </tr>
    <tr>
        <td>16</td>
        <td>Dennis Burns</td>
        <td>16770501 7585</td>
    </tr>
    <tr>
        <td>17</td>
        <td>Marvin Sargent</td>
        <td>16251106 5001</td>
    </tr>
    <tr>
        <td>18</td>
        <td>Elijah Clay</td>
        <td>16960329 4548</td>
    </tr>
    <tr>
        <td>19</td>
        <td>Gannon Holder</td>
        <td>16081106 1498</td>
    </tr>
    <tr>
        <td>20</td>
        <td>Dustin Olsen</td>
        <td>16130603 9015</td>
    </tr>
    </tbody>
    </table>
    <!-- jQuery js-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <!-- Bootstrap js -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- jQuery Datatable js -->
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <!-- Bootstrap Datatable js -->    
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script>
      $(document).ready( function () {
          $('#example_table').DataTable();
      } );
    </script>
  </body>
</html>

Read Also: Vertical Align Elements Using Bootstrap

Conclusion

I hope now you can create your own jQuery data table with bootstrap UI. jQuery data tables provide much more features you can explore them all.

Enjoy Scripting 🙂

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.

Share
Published by
Nachiket Panchal
5 years ago

Recent Posts

5 Important Things To Know About WordPress Before You Use It

There is a reason big-name companies like CNN use WordPress. WordPress is a popular content…

3 years ago

How to Install MySQL on Your PC in 3 Easy Steps

In this tutorial, I'm going to show you how to install MySQL on your computer.…

4 years ago

Download and Install Turbo C++ for Windows 10 (Full Installation Guide)

Download Turbo C++ for windows 10 in just 7 Mb and run your first C++…

5 years ago

PHP .HTACCESS Redirects

We can redirect any webpage to any other or redirect the whole domain or website…

5 years ago

PHP Redirect Pages

There are lots of methods to redirect pages, like refresh-redirect from META tag, redirect from…

5 years ago

PHP Include & Required

Include files in PHP are used in appending various global or config files. We can…

5 years ago