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.

Index

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 🙂