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
Following CDN files are Included with all needable libraries :
After getting files put the files as following.
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.
I have given here the json array using the aaData.
after it put the following little bit code just below the above code. it will make table stripped and bordered.
That's it,
Here is the OutPut :
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.
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.5 | Bootstrap 3.3.5 |
| jq-2.1.4 | jQuery 2.1.4 |
| dt-1.10.8 | DataTables 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.5 | Bootstrap 3.3.5 |
| jqc-1.11.3 | jQuery compat 1.11.3 |
| dt-1.10.8 | DataTables 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","https://codingcage.com/search/label/PDO"],
["Object Oriented PHP","https://codingcage.com/search/label/PHP OOP"],
["jQuery Tutorials","https://codingcage.com/search/label/jQuery"],
["Ajax Tutorials","https://codingcage.com/search/label/Ajax"],
["CRUD Tutorials","https://codingcage.com/search/label/CRUD"],
["Pagination Tutorials","https://codingcage.com/search/label/Pagination"],
["PHP MySQLi Tutorials","https://codingcage.com/search/label/MySQLi"],
["HTML5 Tutorials","https://codingcage.com/search/label/HTML5"],
["Pagination Tutorials","https://codingcage.com/search/label/Pagination"],
["PHP MySQLi Tutorials","https://codingcage.com/search/label/MySQLi"],
["HTML5 Tutorials","https://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 :
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","https://codingcage.com/search/label/PDO"],
["Object Oriented PHP","https://codingcage.com/search/label/PHP OOP"],
["jQuery Tutorials","https://codingcage.com/search/label/jQuery"],
["Ajax Tutorials","https://codingcage.com/search/label/Ajax"],
["CRUD Tutorials","https://codingcage.com/search/label/CRUD"],
["Pagination Tutorials","https://codingcage.com/search/label/Pagination"],
["PHP MySQLi Tutorials","https://codingcage.com/search/label/MySQLi"],
["HTML5 Tutorials","https://codingcage.com/search/label/HTML5"],
["Pagination Tutorials","https://codingcage.com/search/label/Pagination"],
["PHP MySQLi Tutorials","https://codingcage.com/search/label/MySQLi"],
["HTML5 Tutorials","https://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.
sorry posting once again so I can get the comment feed to my email :)
ReplyDeleteNot Found
The requested URL /sitefiles/logup/index.php was not found on this server.
Guidance on fixing this
please check index.php file is physically is there or not
Deletevery nice and easy to understand ...
ReplyDeletethank you , alex
DeleteHi, thank you for help.
ReplyDeletePlease, how to load mysql data into Bootstrap DataTables by using PHP PDO.
Hello Mariam, i will post a tutorial about loading mysql data into bootstrap datatables, soon :)
DeleteVery good tutorial as usual, Pradeep :) I just wanted to ask if it's possible to add a print option to the plugin. Thanks!
ReplyDeleteSorry Sarah, for the late reply, and yes it's possible to add print button. this article might help you
Deletehttps://datatables.net/extensions/buttons/examples/print/simple.html
Is your download link still working? Nothing seems to happen when I try.
ReplyDeleteHello there, link was updated you can download it ...
DeleteSorry do you have any tutorial, like this with data from database and and view link on each row.
ReplyDelete