Question

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

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

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列被隐藏然后展开时，该列不再是黄色。

Answer 1

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

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

用于隐藏列的数据表响应集类

2 个答案: