隐藏列的数据表响应集类答案

【问题标题】：datatables-responsive set class for hidden column隐藏列的数据表响应集类
【发布时间】：2018-08-03 21:23:55
【问题描述】：

我正在尝试为数据表中的单个列设置类名。问题是数据表响应扩展隐藏的所有列都没有应用该类。我正在寻找解决方法/修复方法。

您甚至可以在他们的一个示例中看到它：

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

非隐藏salary 列使用desktop 类

$('.desktop').length;
12

隐藏的extn 列使用none 类

$('.none').length;
0

编辑：

自 2016 年以来，这似乎一直是一个未解决的问题。

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

仍然非常感谢任何解决方法的想法。

这是一个 jsfiddle，它显示了我在说什么。

http://jsfiddle.net/9n6qbcdr/

当您水平缩小显示时，salary 列被隐藏。当salary 列被隐藏然后展开时，该列不再是黄色的。

【问题讨论】：

标签： javascript jquery html css datatables

【解决方案1】：

因为如果类是 none 然后 DataTables 从表中删除它并显示长度：0 您必须更改课程，例如{ "data": "extn", className: "hiddenColumn" } 并添加 css display:none

【讨论】：

此解决方案仅在您希望默认手动隐藏列时有效。如果 datatables-responsive 检测到内容不适合屏幕并尝试自动隐藏该列，则永远不会应用 hiddenColumn 类。
look this $('.hide').length 返回 12 并且它不可见为“.none”
你链接了一张图片
是的，只是为了表明该表是响应式的，它不显示具有 'hide' 类和 $('.hide').length 返回 12 的列。因为这就是你的意思？跨度>
我用 jsfiddle 编辑了我的帖子。我希望薪水栏即使在“隐藏”后仍保持黄色，然后通过单击展开按钮再次显示。

【解决方案2】：

根据 Michał B 的代码，这是一个解决方案

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');
});

【讨论】：