DataTables响应优先级

Question

我正在使用这个惊人的插件，但我在列上使用响应优先级时发现了一个问题。

码：

var fillTable= function (data) {

var list = [
     { name: 'Name 123456789', email: "[email protected]"},
     { name: 'Name 123456789_10', email: "[email protected]"},
     { name: 'Name 123456789_11', email: "[email protected]"},
     { name: 'Name 123456789_12', email: "[email protected]"},
     { name: 'Name 123456789_13', email: "[email protected]"}
];

var tableToFill= $('#js-table').DataTable({
    responsive: true,
    columnDefs: [
        { responsivePriority: 1, targets: 1 }
        ],
    columns: [
        { data: "name", title: "Name" },
        { data: "email", title: "Email" }
    ],
    language: localiseDataTable(),
    order: [[0, 'desc']]
});

tableToFill.clear();
tableToFill.rows.add(list);
tableToFill.draw(false);
tableToFill.columns.adjust().responsive.recalc();

}

有人可以解释一下为什么当我缩小屏幕时，我使用时不再出现“加号”符号：{responsivePriority：1，targets：1}。这使得无法看到childRow，从而无法在低分辨率屏幕中看到第一列数据。

提前致谢

Answer 1

这与框架中的限制有关。

+图标和按钮效果将应用于第一列，无论它是否可见。

{ responsivePriority: 1, targets: 1 }

当列计数从0开始时，这会将第二列设置为最高视觉优先级。

如果您希望它保留第二列和优先级，我建议您创建第三列的第三个空列。

Answer 2

我跟着Tom Glover的提示，添加了一个新专栏;不过，我不想在页面上浪费空间，因此我使用DataTable的事件使其仅在需要时显示。希望能帮助到你。

var firstChildrenSelector = '#example tr th:first-child, #example tr td:first-child';

if (!table.responsive.hasHidden()) {
  $(firstChildrenSelector).css('display', 'none');
}

$(window).resize(function() {
  if (table.responsive.hasHidden()) {
    $(firstChildrenSelector).css('display', 'table-cell');
  } else {
    $(firstChildrenSelector).css('display', 'none');
  }
});