Implement responsive data tables by setting a specific class for hiding columns

Question

Implement responsive data tables by setting a specific class for hiding columns

Having trouble assigning a specific class name to individual columns in datatables? It seems that when columns are hidden using the responsive extension, the desired class is not applied. Looking for a solution or workaround.

Check out this example from Datatables:

https://datatables.net/extensions/responsive/examples/display-control/init-classes.html

The visible salary column has a class of desktop

$('.desktop').length;
12

The hidden extn column has a class of none

$('.none').length;
0

Edit:

Seems like there's been an ongoing issue since 2016 regarding this matter.

https://github.com/DataTables/Responsive/issues/93

Any suggestions for workarounds would be greatly appreciated.

Take a look at this jsfiddle for a visual demonstration of the problem.

http://jsfiddle.net/9n6qbcdr/

When the display size is reduced horizontally, the salary column disappears. Upon expanding it again, notice how the yellow color of the column is lost.

javascript jquery html css datatables

Answer 1

Answer №1

When the class is set to none, DataTables removes it from the table and displays Length: 0. To resolve this, you need to modify the class like this:

{ "data": "extn", className: "hiddenColumn" }

and apply CSS by adding display:none

Answer 2

When the class is set to none, DataTables removes it from the table and displays Length: 0. To resolve this, you need to modify the class like this:

{ "data": "extn", className: "hiddenColumn" }

and apply CSS by adding display:none

Answer 3

Answer №2

Utilizing Michał B's code as a reference, here is a solution:

HTML

<div class="container">
  <table class="dataTable table table-striped" id="example">
  </table>
</div>

CSS

td.customColumn{
  background-color:yellow;
}

.customColumn > .dtr-data{
  background-color:yellow;
}

Javascript

let dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422","$170,750"],
  ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "$86,000"],
  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "$433,060"],
];

let columnDefs = [{
  title: "Name"
}, {
  title: "Position"
}, {
  title: "Office"
}, {
  title: "Extn.",
  className: "customColumn"
}, {
  title: "Salary",
}];

let myTable = $('#example').DataTable({
  data: dataSet,
  columns: columnDefs,
  responsive: true,
}).on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
        if(typeof row.selector.rows[0] !== 'undefined'){
        $(row.selector.rows[0].nextSibling).find('li[data-dt-column="3"]').addClass('customColumn');    
    }

}).on('responsive-resize',function( e, datatable, columns ){
        $(columns).find('li[data-dt-column="3"]').addClass('customColumn');
});

Answer 4

Utilizing Michał B's code as a reference, here is a solution:

HTML

<div class="container">
  <table class="dataTable table table-striped" id="example">
  </table>
</div>

CSS

td.customColumn{
  background-color:yellow;
}

.customColumn > .dtr-data{
  background-color:yellow;
}

Javascript

let dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422","$170,750"],
  ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "$86,000"],
  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "$433,060"],
];

let columnDefs = [{
  title: "Name"
}, {
  title: "Position"
}, {
  title: "Office"
}, {
  title: "Extn.",
  className: "customColumn"
}, {
  title: "Salary",
}];

let myTable = $('#example').DataTable({
  data: dataSet,
  columns: columnDefs,
  responsive: true,
}).on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
        if(typeof row.selector.rows[0] !== 'undefined'){
        $(row.selector.rows[0].nextSibling).find('li[data-dt-column="3"]').addClass('customColumn');    
    }

}).on('responsive-resize',function( e, datatable, columns ){
        $(columns).find('li[data-dt-column="3"]').addClass('customColumn');
});

Implement responsive data tables by setting a specific class for hiding columns

Answer №1

Answer №2

Similar questions

The markerwithlabel feature failed to appear on the Google Map when using MeteorJS

Utilizing Javascript to Extract Data from Twitter Json Files

When debugging in ASP MVC4, JavaScript will only evaluate HiddenFor once you've paused to inspect it

Utilizing React Hook to fetch initial data in useEffect

After refreshing the page, users are redirected back to the login page

Videos fail to load on iPhone but load successfully on desktop and Android web browsers

how to dynamically update a button's text using Vue.js

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Having trouble toggling between the trending and search features on giphy website

How do I use React and Material-UI to efficiently display multiple tables from a complex JSON object containing multiple arrays of data?

What is the best way to configure a basic firebase ajax call?

Tips on hiding specific table rows in two separate tables based on the chosen option from a dropdown menu

How to enable real-time file changes detection in sails for development

Triggering a JQuery slider event on each individual slider handle within the range

Is It Possible to Create Flash Content Without Using a SWF File?

The art of transforming properties into boolean values (in-depth)

Maintaining the proportions of divs containing background images

Avoiding the default action to submit AJAX form data won't result in any changes to the front end?

Struggling to apply the active class using a combination of jquery, nodejs, express, and bootstrap

Using Angular 4 with Semantic-UI for Dropdown menus