Question

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

代码：

var fillTable= function (data) {

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

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

我遵循汤姆·格洛弗的提示，并添加了新的专栏；不过，我不想浪费页面上的空间，所以我使用了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');
  }
});

DataTables响应优先级

2 个答案: