Datatables.net - Plugin options

DataTables jQuery Plugin Options – Complete Guide

In Part I of this series, we introduced the basics of the DataTables.net jQuery plugin.

The DataTables jQuery plugin provides a rich set of configuration options for sorting, paging, search, and responsive layouts. Let’s see how you can utilize these options efficiently.

CDN Links for DataTables

Add the following CSS and JS files to your project using CDN links:

Stylesheet References

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

Script References

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

Disable All Options

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

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

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


To display “Show entries” dropdown 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"
}
});

Enable DataTables Responsive Mode

To make your table responsive, include the following assets and add the responsive class to your HTML table.

Assets

"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"

HTML Markup

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

table class="promo-pricing-table responsive"

JavaScript Initialization

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

Preview – Desktop View

Datatables.net

Preview – Responsive (Mobile) View

datatables.net

Like the DataTables plugin, there are many useful jQuery utilities that improve web performance. Check out this guide: How to Debug Effectively Using jQuery .

Follow us on Facebook @CreativeTechnocrayts and stay updated!

Comments

Post a Comment

Popular posts from this blog

CSS Flexbox Layout

Image
CSS Flexbox Layout – Complete Guide with Examples Before diving in, make sure to read our guide on CSS Display Property . Traditionally, web layouts like the above were created using CSS floats . However, with CSS Flexbox , you can achieve the same results more efficiently and responsively. Why Use CSS Flexbox? ✅ Flexbox is a modern alternative to CSS floats and table layouts. ✅ It gives control over alignment, direction, order, and size of elements within a container. Let’s explore each concept of Flexbox step by step. Basic Components of CSS Flexbox a) Flex Container b) Flex Items Browser Compatibility CSS Flexbox is supported by all modern browsers including Chrome, Firefox, Safari, iOS Safari, and Opera. Internet Explorer 11 supports an older version of the specification with some limitations. ...
Read more >>

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu...
Read more >>