Jquery DataTables are the powerful jQuery plugin for creating tables with sorting options and search feature. It provides searching, sorting and pagination without any configuration.
In this article we will go through how to sort HTML table column using JavaScript and how to use some of the features. It is very simple as any one can implement this in any of your application.
Getting started
Data Tables can work with data from a verity of sources. It can directly work on an HTML table or we can specify data as an array while initialization. Or it can work on data coming from an Ajax source. Let’s get started with small example. In this Jquery data table tutorial we creating a simple HTML table for the sake of understanding the structure of the Data table HTML.
In the below HTML you can see, we have implemented Jquery Data table.
<html>
<head>
<!-- data table CDN -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<table id="example">
<!-- To implement Data Table thead is required -->
<thead>
<tr><th>Sites</th></tr>
</thead>
<!-- To implement Data Table tbody is required -->
<tbody>
<tr><td>mysite.com</td></tr>
<tr><td>mgnad.com</td></tr>
<tr><td>gforgadget.com</td></tr>
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js">
</script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js">
</script>
<!-- Finally we have run a function with table ID -->
<script>
$(function(){
$("#example").dataTable();
});
</script>
</body>
</html>
Note : To use Jquery Data Tables <thead> </thead> and <tbody> </tbody> is maditory.
Happy Coding 🙂
Add Comment