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.

Title	Episode	Rating	Year Released
The Phantom Menace	I	PG	1999
Attack of the Clones	II	PG	2002
Clone Wars	N/A	TV	2008
Revenge of the Sith	III	PG-13	2005
Rebels	N/A	TV	2014
Rogue One	N/A	PG-13	2016
A New Hope	IV	PG	1977
Empire Strikes Back	V	PG	1980
Return of the Jedi	VI	PG	1983
The Force Awakens	VII	PG-13	2015

And here's the code:


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

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 https://datatables.net/reference/option/.

tech @ Beacon Deacon

A Basic DataTable - Jamie Johnson