tech @ Beacon Deacon

A Basic DataTable - Jamie Johnson

Jamie Johnson

April 25, 2016

If you are familiar with the DataTables Table plug-in for jQuery, then you are familiar with a handy plug-in offering a lot of options. The latest version also offers responsive behavior! Setting up a DataTable does not have to be hard. In this article, I show how to set up a basic DataTable with just a little bit of code.

TitleEpisodeRatingYear Released
The Phantom MenaceIPG1999
Attack of the ClonesIIPG2002
Clone WarsN/ATV2008
Revenge of the SithIIIPG-132005
Rogue OneN/APG-132016
A New HopeIVPG1977
Empire Strikes BackVPG1980
Return of the JediVIPG1983
The Force AwakensVIIPG-132015

And here's the code:

<script type="text/javascript" src="//"></script>
<link rel="stylesheet" type="text/css" href="//,r-2.0.2/datatables.min.css"/>
<script type="text/javascript" src="//,r-2.0.2/datatables.min.js"></script>
td { text-align:center; } 
th:first-child, td:first-child { text-align:left; } 
#example_filter { position: relative; left: -40px; }
$(document).ready(function() {
    $('#example').DataTable( { responsive: true } ); 
} );
<table id="example" class="display" cellspacing="0" width="100%"> 
<tr><th>Title</th><th>Episode</th><th>Rating</th><th>Year Released</th></tr>
<tr><td>The Phantom Menace</td><td>I</td><td>PG</td><td>1999</td></tr>

If you don't want all the features and just want a table to be responsive, then add options comma separated (as shown below) in the call above where you see the responsive: true option:

paging: false, searching: false, info: false, ordering: false 

Other options are available at

Back to top