Question

我现在正在使用数据表和jQuery。我有一个简单的表，其中的设置通过复选框切换。单击（选中）设置后，我会获取元素attr('data-column')并使用它来根据用户的需要显示或隐藏该表列。

当用户使用以下代码选择设置时，此方法有效：

// User clicks on a checkbox to toggle a setting on/off
$('.setting').click(function(){

  let table = $('#my-table');

  const current_element = $('input[name="test"][type="checkbox"]');
  const data_column_number = current_element.attr('data-column');

  if(current_element.is(":checked")){
    current_element.prop('checked',false);
    table.column(data_column_number).visible(false);
  }
  else {
    current_element.prop('checked',true);
    table.column(data_column_number).visible(true);
  }

});

现在，我在JSON数组中拥有用户预先保存的设置。我遍历数组，如果检查了设置，我会使列号可见（visible(true)）。如果不应该检查该设置，我将其可见属性设置为false（visible(false)）。它看起来像这样：

let table = $('#my-table');

// assume value has an index called ['checked'] that is empty or set to 'checked'
$.each(settings,function(key,value){
  let current_element = $('input[name="'+key+'"][type="checkbox"]');
  let data_column_number = current_element.attr('data-column');

  if(value['checked'] === 'checked'){
    current_element.prop('checked',true);
    if(table.column(data_column_number).visible() === false){
      table.column(data_column_number).visible(true);
    }
  }
  else {
    current_element.prop('checked',false);
    if(table.column(data_column_number).visible() === true){
      table.column(data_column_number).visible(false);
    }
  }
});

无论出于何种原因，上面的代码块除第一个data-column外都有效。我已使用console.log打印出每个data-column，并查看table.column(data_column_number).visible()之前和之后的值是什么，并且它们是正确的。

因此，如果我选中"test"，然后单击某些内容以加载在这些设置中启用了"test"的设置，则会隐藏"test"，尽管console.log显示{{1} }} data-column（正确），0在任何更改（正确）之前设置为visible()，且true仍由visible()设置为true $.each()循环结束。尽管如此，我的第一栏也消失了。

如果我的设置隐藏了另一个不在位置0的列，它可以正常工作。

有谁看到可能导致这种情况的原因？

Answer 1

我找到了答案。这可能不适用于所有人，但为了以防万一，请确保属性data-column 不 undefined。在我的案例中发生的事情是，在某个地方，我在表格中有子项目，所以有些标题没有data-column属性。

数据表的工作方式（至少在我的情况下）是将undefined列的可见状态设置为true或false，实质上是调用table.column(undefined).visible(false)或table.column(undefined).visible(true)无论如何设置table.column(0).visible(false)。

在继续设置data_column_number !== undefined状态之前，只需添加一项检查以查看是否visible消除了我的问题。

DataTables column.visible隐藏了第一列，尽管返回true

1 个答案: