Creating a table with search, sorting and paging
How To HTML CSS

Creating a table with search, sorting and paging

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

In this tutorial we’ll be creating a Bootstrap table with features like sorting, paging and searching using DataTable.js.

A demo of bootstrap DataTable

VIEW DEMO

Download Source code

Your subscription could not be saved. Please try again.
Hey, We've sent an email to your inbox with the download link. If you did not receive the email, please wait for a few minutes and check the spam folder or promotions tab.

Creating a simple table with search, sort, and pagination

1) Adding references

First of all, you need to add reference to the following JavaScript and CSS files.

  • Bootstrap
  • Jquery and
  • Datatable.js

Add this code in the <head> tag of your HTML page.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<!-- Bootstrap core JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Page level plugin JavaScript--><script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>

2) Creating a table

Create the following table in the <body> tag.

<div class="container">
    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>327,900</td>
            </tr>
        </tbody>
    </table>
</div>

3) Final JavaScript

The following code can be used to create a table with all the features.

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

If you want to disable some features, use the following code.

<script>
$(function () {
    $('#dataTable').DataTable({
      "pageLength": 3,
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
      });
  });
</script> 

To set a default column to sort by default, we can use the order attribute.

"order": [[3, 'asc']]

This code will display the third column sorted in ascending order.

Use HTML 5 data attribute instead of JavaScript

We can also use HTML 5 data-* attribute to specify the initialization options instead of JavaScript. Here's an example.

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0" data-page-length="3" data-order="[[ 2, "asc" ]]">
    <!-- Code removed for brevity -->
</table>
<script>
    $(document).ready(function() {
          $('#dataTable').DataTable();
    });
</script>

This instructs the datatable.js to display three rows per page with the second column sorted in ascending order.

Load AJAX data

The DataTable.js library can obtain data from different sources including AJAX data source, a data object or even a custom data source function.

This example shown how to fill the table with data from an AJAX request. First create a simple table with the columns you want to display.

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Year</th>
            <th>Color</th>
            <th>Pantone_value</th>
        </tr>
    </thead>
</table>

Next step is to fetch data from a url and populate the data in our table.

<script>
    $(function () {
        $('#dataTable').DataTable({
            "ajax": {
                "url": "https://reqres.in/api/unknown", /*Data source*/
                "dataSrc": "data", /*object that holds the data*/
            },
            columns: [
                { data: 'id' },
                { data: 'name' },
                { data: 'year' },
                { data: 'color' },
                { data: 'pantone_value' }
            ],
            "columnDefs": [{ /* default values for columns */
                "defaultContent": "-",
                "targets": "_all"
            }],
        });
    }); 
</script>

We use the dataSrc attribute to specify the data object array that holds the data to be displayed in the table.

Demo of the response to AJAX request

Sample AJAX response
Sample AJAX responce

Have any questions? Let me know in the comments below.