Datatables.net - Plugin options

Datatables jquery plugin options

In PART i of this series we have discussed the basics of datatables.net plugin
Datatables.net has a wide set of options which gives extensive interface support and browser compatibility.
The following article clearly explains how to utilize the options provided by the plugin.
The datatables.net CDN links for style sheet reference

https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css

The datatables.net CDN links for script reference

https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css

To disable all options

$("#example").dataTable({
paging: false,
searching: false,
info: false
});

To display “Show entries” at the bottom of the data table

$('.promo-pricing-table').dataTable({
"dom": 'frtlip'
});
})

To display “Show entries” at the bottom of the data table in the same row

$(function(){
$('.promo-pricing-table').dataTable({
"dom": 'frtlip'
});
//lengthmenu -> add a margin to the right and reset clear
$(".dataTables_length").css('clear', 'none');
$(".dataTables_length").css('margin-right', '20px');

//info -> reset clear and padding
$(".dataTables_info").css('clear', 'none');
$(".dataTables_info").css('padding', '0');
})

To explain only drop down and remove “show entries” phrase in the data tables

$('.promo-pricing-table').dataTable({
"dom": 'frtlip',
language: {
sLengthMenu: " _MENU_"
}
});
//lengthmenu -> add a margin to the right and reset clear
$(".dataTables_length").css('clear', 'none');
$(".dataTables_length").css('margin-right', '20px');
//info -> reset clear and padding
$(".dataTables_info").css('clear', 'none');
$(".dataTables_info").css('padding', '0');

Changing datatables text of “Showing x of n records”

$('.promo-pricing-table').dataTable({
language: {
info: "Displaying _PAGE_ of _PAGES_ records"
}
});

Datatables responsive

First, Make sure the following assets are added.

"https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css"
"https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"

Next, Slight changes are implemented to html. The class 'responsive' is added to table.

table class="promo-pricing-table responsive"

Finally, enable the options for responsive in script.

$('.promo-pricing-table').dataTable({
responsive: true
});

Datatables preview in desktop

Datatables in responsive screens

Like this plugin there are so many others and custom jQuery functions we write. We may encounter some common issues while doing the sameHow to debug Effectively using Jquery will also be very useful to you.

Follow our FB page @CreativeTechnocrayts
Subscribe to Creative Technocrayts and be a part of growing community.