Bootstrap Table with Pagination and Search

How to Create Bootstrap Table with Pagination and Search in HTML, CSS and Javascript

In this tutorial, I will show How to Create Bootstrap Table with Pagination and Search and sorting using HTML, CSS, and Javascript.

Bootstrap Table with Pagination and Search is very useful for any website. We can fetch the record from the database and display it in a tabular form and we can also easily search by Keyword or Text.

We can also easily modify the bootstrap tables as per our requirement to have custom column widths, have tooltips, vertical and horizontal scrolls. These can easily use traditional bootstrap’s table style for the border, stripped, dark tables as well.

Libraries

Add the below libraries in the header section of your webpage.

<link href="css/bootstrap.min.css" rel="stylesheet" >
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet" >
<!-- Bootstrap core JavaScript--> 
<script src="js/jquery-3.5.1.js"></script> 
<!-- Page level plugin JavaScript-->
<link rel="stylesheet" type="text/css" href="js/datatables.min.css"/>
<script type="text/javascript" src="js/datatables.min.js"></script> 

HTML Code

First, we need to create a table with class table table-striped and id example. After we have to open the table attribute <thead> <tr> and then <th>Name</th> for the heading column.

  <table id="example" class="table table-striped" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>

After the heading column, we need to open one another <tbody> <tr> tag, under tr tag we have to open td tag for data display.

 <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
</tbody>

Full Table Code

 <table id="example" class="table table-striped" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
      </tr>
      <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
      </tr>
      <tr>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
      </tr>
      <tr>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>$205,500</td>
      </tr>
      <tr>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>$103,600</td>
      </tr>
      <tr>
        <td>Donna Snider</td>
        <td>Customer Support</td>
        <td>New York</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>$112,000</td>
      </tr>
    </tbody>
   
  </table>

JavaScript Code

The below javascript code will help us to create pagination of table data and sorting of table data.

<script>
  $(document).ready(function() {
    $('#example').DataTable();
   } );
    </script>

Full Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="robots" content="noindex">
<link href="css/bootstrap.min.css" rel="stylesheet" >
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet" >
<title>Document</title>
</head>

<body>
<div class="container">
  <div class="row mt-5">
	  <div class="col-md-12">
	  <table id="example" class="table table-striped" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
      </tr>
      <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
      </tr>
      <tr>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
      </tr>
      <tr>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>$205,500</td>
      </tr>
      <tr>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>$103,600</td>
      </tr>
      <tr>
        <td>Donna Snider</td>
        <td>Customer Support</td>
        <td>New York</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>$112,000</td>
      </tr>
    </tbody>
   
  </table>
	  </div>
	</div>
</div>

<!-- Bootstrap core JavaScript--> 
<script src="js/jquery-3.5.1.js"></script> 
<!-- Page level plugin JavaScript-->
<link rel="stylesheet" type="text/css" href="js/datatables.min.css"/>
<script type="text/javascript" src="js/datatables.min.js"></script> 
<script>
        $(document).ready(function() {
    $('#example').DataTable();
} );
    </script>
</body>
</html>

Hope this article will help you to create a Responsive Bootstrap Table with Pagination and Search.

Read Also:

1. Pricing Table Design Bootstrap 5?
2. How to Display Content on hovering Card using CSS?
3. How to create a Portfolio Gallery?
4. FAQ Page with Show and Hide Questions and Answers?
5. Bootstrap Team Section Design Download
6. Bootstrap Carousel with Captions and Thumbnails Free Download
7. Bootstrap Table Search Filter Free Download