How to use jQuery Bootstrap DataTables with Example | Coding Cage

How to use jQuery Bootstrap DataTables with Example

By
Hello friends, today in this tutorial we will discuss about jQuery DataTables, Bootstrap a How-to tip, DataTables is a powerful jQuery plugin for creating dynamic tables which provides sorting, searching, records per page and pagination feature without any configuration. it's useful to create dynamic tables and you can use it in your projects, Before proceed please take a quick look of the live demo of jQuery DataTable, let's code
How to use jQuery Bootstrap DataTables with Example

Let's Start

First of all download the following jquery and css datatable files from the official site or you can also make use of the CDN.

Following CDN files are Included with all needable libraries :

https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css
bs-3.3.5Bootstrap 3.3.5
jq-2.1.4jQuery 2.1.4
dt-1.10.8DataTables 1.10.8

https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js
bs-3.3.5Bootstrap 3.3.5
jqc-1.11.3jQuery compat 1.11.3
dt-1.10.8DataTables 1.10.8

After getting files put the files as following.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

first cdn stylesheet put within head tag, and second cdn jquery file put just above closing body tag so the page will load fastly.
here we are using latest cdn's so we no need to use bootstrap js and css files it is allready included in these two files.

Now it's time to create table and assign example id for table, id="example", a simple table with it's regular structure as below.

<table id="example"></table>

I have given here the json array using the aaData.

<script type="text/javascript" charset="utf-8">
$(document).ready(function() 
{
 $('#example').dataTable( {
        "aaData": [
   ["PHP Data Object | PDO","http://www.codingcage.com/search/label/PDO"],
   ["Object Oriented PHP","http://www.codingcage.com/search/label/PHP OOP"],
   ["jQuery Tutorials","http://www.codingcage.com/search/label/jQuery"],
   ["Ajax Tutorials","http://www.codingcage.com/search/label/Ajax"],
   ["CRUD Tutorials","http://www.codingcage.com/search/label/CRUD"],
   ["Pagination Tutorials","http://www.codingcage.com/search/label/Pagination"],
   ["PHP MySQLi Tutorials","http://www.codingcage.com/search/label/MySQLi"],
   ["HTML5 Tutorials","http://www.codingcage.com/search/label/HTML5"],
   ["Pagination Tutorials","http://www.codingcage.com/search/label/Pagination"],
   ["PHP MySQLi Tutorials","http://www.codingcage.com/search/label/MySQLi"],
   ["HTML5 Tutorials","http://www.codingcage.com/search/label/HTML5"]
   ],
        "columns": [
            { "title": "Article Title" },
            { "title": "Tutorial Link" }
        ]
    } );   
});
</script>

after it put the following little bit code just below the above code. it will make table stripped and bordered.

<script type="text/javascript">
  $('#example')
 .addClass('table table-striped table-bordered');
</script>

That's it,
Here is the OutPut :
How to use jQuery Bootstrap DataTables with Example | OutPut

Complete Script


<!DOCTYPE html>
<html lang="en">
<head>
       
<title>How to use jQuery Bootstrap DataTables</title>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<style>
td
{
 font-family:Verdana, Geneva, sans-serif;
}
</style>
</head>
   
<body>
    
    <br />
                                
   <div class="container">
   <table id="example"></table>
   </div>                             
               
         
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() 
{
 $('#example').dataTable( {
        "aaData": [
   ["PHP Data Object | PDO","http://www.codingcage.com/search/label/PDO"],
   ["Object Oriented PHP","http://www.codingcage.com/search/label/PHP OOP"],
   ["jQuery Tutorials","http://www.codingcage.com/search/label/jQuery"],
   ["Ajax Tutorials","http://www.codingcage.com/search/label/Ajax"],
   ["CRUD Tutorials","http://www.codingcage.com/search/label/CRUD"],
   ["Pagination Tutorials","http://www.codingcage.com/search/label/Pagination"],
   ["PHP MySQLi Tutorials","http://www.codingcage.com/search/label/MySQLi"],
   ["HTML5 Tutorials","http://www.codingcage.com/search/label/HTML5"],
   ["Pagination Tutorials","http://www.codingcage.com/search/label/Pagination"],
   ["PHP MySQLi Tutorials","http://www.codingcage.com/search/label/MySQLi"],
   ["HTML5 Tutorials","http://www.codingcage.com/search/label/HTML5"]
   ],
        "columns": [
            { "title": "Article Title" },
            { "title": "Tutorial Link" }
        ]
    } );   
});
</script>
        
<script type="text/javascript">
  $('#example')
 .addClass('table table-striped table-bordered');
</script>


</body>
</html>

Hope you Like this, if you then why don't you share this ? If you have any feedback please let me know by using comment or If you have any query or any doubt then please feel free to ask.



11 comments:

  1. sorry posting once again so I can get the comment feed to my email :)

    Not Found

    The requested URL /sitefiles/logup/index.php was not found on this server.

    Guidance on fixing this

    ReplyDelete
    Replies
    1. please check index.php file is physically is there or not

      Delete
  2. very nice and easy to understand ...

    ReplyDelete
  3. Hi, thank you for help.
    Please, how to load mysql data into Bootstrap DataTables by using PHP PDO.

    ReplyDelete
    Replies
    1. Hello Mariam, i will post a tutorial about loading mysql data into bootstrap datatables, soon :)

      Delete
  4. Very good tutorial as usual, Pradeep :) I just wanted to ask if it's possible to add a print option to the plugin. Thanks!

    ReplyDelete
    Replies
    1. Sorry Sarah, for the late reply, and yes it's possible to add print button. this article might help you

      https://datatables.net/extensions/buttons/examples/print/simple.html

      Delete
  5. Is your download link still working? Nothing seems to happen when I try.

    ReplyDelete
    Replies
    1. Hello there, link was updated you can download it ...

      Delete
  6. Sorry do you have any tutorial, like this with data from database and and view link on each row.

    ReplyDelete