Advertisement

HTML & CSS, Javascript, jQuery

Integrate jQuery DataTables with Bootstrap Website

Bootstrap | DataTables | Jquery

Bootstrap-DataTables

Advertisement

DataTables is a jQuery plugin, provides a simple way to integrate features like sorting, searching, pagination and more in a matter of time. Since now a days all websites require mobile friendly design, frameworks like bootstrap are gaining popularity among web developers. So I decided to make a tutorial on how to integrate DataTables with Bootstrap in your bootstrap based website.

Bootstrap Framework files:

Bootstrap CSS

Bootstrap JS

DataTables Framework files:

DataTables Bootstrap CSS

jQuery JS

jQuery DataTables Core JS

DataTables Bootstrap JS

You can download above files or use links like I did in following code.

Prepare HTML structure for DataTables

Let’s create a new HTML (or other webpage files like PHP). For this tutorial I am creating an HTML file (index.html). Add following code in html file.

Code is pretty straight forward. A simple Bootstrap based site structure having Bootstrap CSS loaded in head section. jQuery & Bootstrap JS are loaded just before  the body tag ends. Since DataTables requires Table structured HTML code, a simple table with dummy data is added in above code. For this tutorial purpose I only added 5 rows but to test pagination you have to add more rows in table.

If you run index.html file in browser, you will see a table just like this:

Bootstrap DataTables Step 1

 

Integrate Bootstrap DataTables

We are just one step short from integrating DataTables. Let’s do this. Add following highlighted lines in index.html file.

We added a new CSS for Bootstrap DataTables. Now add following code just before body tag ends for JS files for Bootstrap DataTables.

Finally lets call DataTables on our example table to finish work.

Time to run in browser again. Hopefully you will see something like this:

Bootstrap DataTables 2Voila! As you can see search bar for filter, Pagination at bottom and Sorting option for all columns added by DataTables with having bootstrap styled design thanks to Bootstrap DataTables CSS. We are wrapping this tutorial here. In upcoming tutorials, we will dive deep into DataTables by integrating with CodeIgniter (PHP Framework) and will also use AJAX features of DataTables.

Download Source Code Files

 

Bookmark Link using: bookmark at folkd