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:
DataTables Framework files:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html> <html> <head> <title>Boostrap Datatables - CodeRiddles</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Products</h1> <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Brand</th> <th>Colors</th> <th>Price</th> <th>In Stock</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Archery Coyote 2 Recurve Bow</td> <td>PSE</td> <td>Brown, Black</td> <td>$199.99</td> <td><span class="text-success">10 Available</span></td> </tr> <tr> <td>2</td> <td>Archery Flash Kid's Recurve Bow Package</td> <td>Bear</td> <td>Brown</td> <td>$64.99</td> <td><span class="text-danger">Sold Out</span></td> </tr> <tr> <td>3</td> <td>Archery Supermag 48 Recurve Bows</td> <td>Bear</td> <td>Black, Red</td> <td>$389.99</td> <td><span class="text-success">12 Available</span></td> </tr> <tr> <td>4</td> <td>Archery Coyote 2 Recurve Bow</td> <td>PSE</td> <td>Brown, Black</td> <td>$199.99</td> <td><span class="text-success">10 Available</span></td> </tr> <tr> <td>5</td> <td>Archery Cruzer G2 RTH Compound Bow Package</td> <td>Bear</td> <td>Silver</td> <td>$399.99</td> <td><span class="text-success">4 Available</span></td> </tr> </tbody> </table> </div> </div> </div> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html> |
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:
Integrate Bootstrap DataTables
We are just one step short from integrating DataTables. Let’s do this. Add following highlighted lines in index.html file.
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html> <head> <title>Boostrap Datatables - CodeRiddles</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css"> </head> |
We added a new CSS for Bootstrap DataTables. Now add following code just before body tag ends for JS files for Bootstrap DataTables.
|
70 71 72 73 74 75 |
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> </body> </html> |
Finally lets call DataTables on our example table to finish work.
|
70 71 72 73 74 75 76 77 78 79 80 |
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable(); } ); </script> </body> </html> |
Time to run in browser again. Hopefully you will see something like this:
Voila! 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.
Bookmark Link using: 
