DataTables 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 see what DataTables can do with a minimal setup.

  <link rel="stylesheet" type="text/css" href="">
  <table id="example">
  <script type="text/javascript" charset="utf8" src=""></script>
  <script type="text/javascript" charset="utf8" src=""></script>

Copy-paste this code to an html page and open it up in a browser. You will see a nice looking table as shown below.


Now you know the power of DataTable and what we can accomplish with it. With this most basic setup, we can search for site names from the top search box and sort them by clicking on the column name. How difficult would be if you were trying to implement those features on your own?

Here we’ve first included the DataTables CSS file in the top and Js in the bottom.

$("#example").dataTable() will instantiate the DataTable on the table with the id example.

Getting started with Datatable JS

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: