Bootstrap Advanced Data Table Widget

You can create simple tables using HTML <table> tag. But a simple table may not be always sufficient to showcase your data and there may be a need of complex data table with multiple features. In this article we will explain how to add an advanced data table widget using a jQuery plugin from datatables.net. The table will look like below and you can view the live demo here. This code is based on the popular Bootstrap framework and we will also explain how to add this widget on your site.

Bootstrap Advanced Data Table
Bootstrap Advanced Data Table

Features of Data Table

The advanced data table widget will have the following features:

  • Sortable based on any single column.
  • Fully responsive made with Bootstrap.
  • Filter the content with 10, 25, 50 and 100 records per page.
  • Search box to search the content in any of the table cell.
  • Stylish pagination for navigating to any page of the table with previous and next page option.
  • Shows number of entries displayed along with total number of entries present in the table.

Download the Complete Code

Download the complete code for the advanced data table widget. The archive file contains the following files:

  • advanced-table.html
  • dataTables.bootstrap.css
  • bootstrap.min.css
  • jquery.min.js
  • bootstrap.min.js
  • dataTables.bootstrap.js
  • jquery.dataTables.js

CSS and JS files are stored inside “CSS” and “JS” folders for appropriate structure and the HTML file resides outside these assets. You can use any structure to store CSS / JS files but you should add the links correctly based on the structure to link them in the HTML file.

Related:  How to Update MAMP to New Version on Localhost?

Offer: Get 92% discount of Mobirise Bootstrap site builder.

How to Add Advanced Data Table Widget on Your Site?

There are three steps to add the data table widget:

Adding CSS

Add the following CSS to the header code section of your page:

<link rel="stylesheet" href="css/bootstrap.min.css">  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.css"/>
<style>
.table-responsive {
overflow-x: hidden;
}
@media (max-width: 800px) {
.table-responsive {
overflow-x: auto;
}
</style>

Here we have used the CDN link for connecting font awesome icons, if you hosted font awesome icons on your site then you don’t need to add this link separately. Ensure to replace the “bootstrap.min.css” and “dataTables.bootstrap.css” links with the correct links from your site.

Adding Script

Add the below scripts to the footer code section of your page:

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>

We have used Google jQuery library with “jquery.min.js”, remember the widget will not work without this jQuery script. If your site uses jQuery by default then you may not need to separately mention this link based on the versions.

Adding HTML

Add the below HTML code inside an embed code element. In this example, we are creating a table with 5 columns and the code contains data for header and one row. You can copy / paste the row data to add as many rows to the table. Ensure to add all the cell values as well as header and rows are having same number of columns for the table to work properly. You can use hyphen (-) to indicate blank data.

<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<!-- This is the header section of the table -->
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<!-- End of table header -->
<tbody>
<!-- This is the start of first row of the table -->
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<!-- End of first row (copy and paste this block to append additional rows -->
<!-- Paste additional rows here -->
</tbody>
</table>
</div>
</div>

Check live demo of data table widget

Recommended Articles:

7 thoughts on “Bootstrap Advanced Data Table Widget”

  1. I was just curious if there are any copyrights to the code provided in this article for the sortable tables? Is there a need to purchase a license or anything? Or is this code granted with Royalty Free Rights? Just don’t want to get into trouble here ;)

    Thanks!

    Reply
    • Bootstrap, Font Awesome and DataTables files are licensed to use for public. There should be no copyright issue unless you don’t remove the credits from the linked files (we just provide the files as it is).

      Reply
  2. I just added a membership roster to our networking group website using your advanced data table widget. Looks great! Thanks! However, the search and sort functions are not working. Can you tell why?

    Reply
    • If you have added any other jQuery scripts, there is a possibility of conflict. Either you can try by removing other scripts or try on a dummy site.

      By looking at your source, there are jQuery scripts not loading with error.

      Reply
  3. At first look, we do not see the heading for the last column – add table heading to all columns – this could be the reason for the scrolling issue.

    For records filter, try with the following CSS – basically the line height of 30px as defined in Bootstrap is pushing the numbers down which you can change to 18px.

    select.input-sm {
    line-height: 18px !important;
    }

    The responsive design looks good when we check – if you are talking about the grey border, remove it under the media queries with:

    @media (max-width: 800px) {
    .table-responsive {
    border: none;
    }
    }

    Since styles are different among themes, you may need to adjust the code for better output.

    Hope this helps.

    Reply
  4. Wonderful!!! Exactly what I was looking for! Quick questions…
    1) The “records per page” button is appearing weird.
    2) When the responsive design gets small, a weird grey box appears around the whole thing
    3) Most important!! – The website will not let me scroll down! The link is below so you can see what I mean.

    Thank you!

    Reply

Leave a Comment