Responsive data table using dataTables.js

Responsive data table using dataTables.js:

We can not see a single web application without a data table. Data table is used somewhere in all the applications to store transactions, user informations, product informations etc.,

 

Nowadays only data table is not enough to fulfill all user needs, so datatables.js came up with sorting, searching, pagination and responsive to support all kind of devices. It’s just a single js file which covers sorting, searching, pagination and responsiveness for a data table.

 

Requirements & Imports:

1. jQuery

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

2. Bootstrap (for page responsiveness)

<script src=”http://getbootstrap.com/dist/js/bootstrap.min.js”></script>

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css” rel=”stylesheet”>

3. datatables.js

<script type=”text/javascript” src=”http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js”></script>

<link href=”http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css” rel=”stylesheet”>

If you want responsive datatable then import datatables.responsive.js also along with datatables.js

<script type=”text/javascript” src=”http://cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”http://cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css”>

Note: Import the files in the same order as we given.

 

 

HTML Source code:

 

[html]

<table id="demoPostTable" data-order='[[ 1, "asc" ]]’ data-page-length=’25’ class="display" cellspacing="0" width="100%">

<thead><tr><th>Article Title</th><th>Tutorial</th><th>Download</th><th>Demo</th></tr></thead>
<tfoot><tr><th>Article Title</th><th>Tutorial</th><th>Download</th><th>Demo</th></tr></tfoot>

<tbody>

<tr>
<td><b>Rust Programming Language Tutorials and Example</b></td>
<td><a href="http://www.ngdeveloper.com/rust-programming-language-tutorials-and-example/" class="jdTut" target="_blank"><b>Tutorial</b></a></td>
<td> </td>
<td> </td>
</tr>

<tr>
<td><b>Swiping in Web Pages using dragend.js</b></td>
<td><a href="http://www.ngdeveloper.com/swiping-in-web-pages-using-dragend-js/" class="jdTut" target="_blank"><b>Tutorial</b></a></td>
<td><a href="http://www.ngdeveloper.com/wp-content/uploads/2015/06/swipe_ngdeveloper.com_.zip" class="jdDown" target="_blank"><b>Download</b></a></td>
<td><a href="http://demo.ngdeveloper.com/swipe/" class="jdDemo" target="_blank"><b>Demo</b></a></td>
</tr>

<tr>
<td><b>Facebook Infer: Finding bugs before it goes live</b></td>
<td><a href="http://www.ngdeveloper.com/facebook-infer-finding-bugs-before-it-goes-live/" class="jdTut" target="_blank"><b>Tutorial</b></a></td>
<td> </td>
<td></td>
</tr>

<tbody>
</table>

[/html]

 

Javascript:

[html]

<script>
$(document).ready( function () {

$(‘#demoPostTable’).addClass( ‘nowrap’ ).DataTable( {
responsive: false
});

} );

</script>

[/html]

 

here demoPostTable is the id of the table.

demoPostTable – table id

 

Responsive Data table :

If you want the data table to be responsive then make the responsive to true.

[html]

<script>
$(document).ready( function () {

$(‘#demoPostTable’).addClass( ‘nowrap’ ).DataTable( {
responsive: true
});

} );

</script>

[/html]

 

Wrap data table:

If you want your data table to be wrap, then remove the .addClass(‘nowrap’),

[html]

<script>
$(document).ready( function () {

$(‘#demoPostTable’).DataTable( {
responsive: true
});

} );

</script>

[/html]

 

Not getting the data table expected way then debug this way:

1. Ensure you have imported the jQuery and datatables.js

2. Ensure you have given the correct table id in the script.

3. Ensure you have imported the datatables.css also for default styling options.

 

Still not getting the expected data table, then post your script error or doubts in the comments section to help you better.!