CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatatables
als9xd
als9xd

Reputation: 854

datatables-responsive set class for hidden column

I'm trying to set a class name for one individual column in datatables. The problem is that all columns that are hidden by the datatables responsive extension don't have that class applied. I'm looking for a workaround/fix.

You can even see it on one of their examples:

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

Non-hidden salary column uses desktop class

$('.desktop').length;
12

Hidden extn column uses none class

$('.none').length;
0

Edit:

It looks like there has been an open issue on this since 2016.

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

Any ideas for workarounds are still greatly appreciated though.

Here is a jsfiddle that shows what I am talking about.

http://jsfiddle.net/9n6qbcdr/

When you shrink the display horizontally the column salary is hidden. When the salary column gets hidden and then expanded, the column is no longer yellow.

Upvotes: 3

Views: 3034

Answers (2)

als9xd
als9xd

Reputation: 854

Based on Michał B's code this 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');
});

Upvotes: 0

Michał B
Michał B

Reputation: 96

Because if class is none then DataTables remove this from table and shown Length: 0 You must change class e.g. { "data": "extn", className: "hiddenColumn" } and add css display:none

Upvotes: 1

Related Questions