JQuery

Learn Jquery Data Tables in 2 minutes

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 🙂

About the author

Vishwas

Vishwas

Software Engineer By Profession, WEB Astronaut, Hobby Blogger. I love to share Tech Ideas and like to learn and explore new things and Technologies.

Add Comment

Click here to post a comment