Question

我正在使用下拉列表中的复选框来处理用于显示和隐藏列的数据表，但是我总是会遇到以下错误：无法重新初始化数据表，但是当我在下拉列表中选择复选框时我需要使用数据表，我不知道如何将代码放在DataTable中以下是html资源：

function showColumns() {
  var checkList = document.getElementById('list1');
  var items = document.getElementById('items');
  var columns = document.getElementById('choose_columns');
  if (items.classList.contains('visible')) {
    items.classList.remove('visible');
    items.style.display = "none";
  } else {
    items.classList.add('visible');
    items.style.display = "block";
  }

  if (columns.classList.contains('visible')) {
    columns.classList.remove('visible');
    columns.style.display = "none";
  } else {
    columns.classList.add('visible');
    columns.style.display = "block";
  }
}

function hideColumns() {
  var items = document.getElementById('items');
  var columns = document.getElementById('choose_columns');

  items.classList.remove('visible');
  items.style.display = "none";

  columns.classList.remove('visible');
  columns.style.display = "none";

}

function applyColumns() {
  var selected = [];
  var column;
  var i;

  var table = $('#results').DataTable({

  });

  $('ul#items input:not(:checked)').each(function() {
    selected.push($(this).attr('data-column'));

  });


  for (i = 0; i < selected.length; i++) {
    column = table.column(selected[i]);
    if (column.visible()) {
      column.visible(false);
    }

  }

  hideColumns();

}


$(document).ready(function() {


});

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.choose_columns {
  display: none;
  list-style: none;
}

.dropdown-check-list ul.choose_columns {
  padding: 5px 50px 5px 10px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>

<div id="list1" class="dropdown-check-list" tabindex="100">
  <span class="anchor" onclick="showColumns()">Select Columns</span>
  <ul id="items" class="items">
    <li><input type="checkbox" value="url" class="toggle-vis" data-column="0" checked="checked" />Build URL</li>
    <li><input type="checkbox" value="scenario" class="toggle-vis" data-column="1" checked="checked" />Scenario</li>
    <li><input type="checkbox" value="status" class="toggle-vis" data-column="2" />Status</li>
    <li><input type="checkbox" value="local" class="toggle-vis" data-column="3" />Local </li>
    <li><input type="checkbox" value="browser" class="toggle-vis" data-column="4" />Browser </li>
  </ul>
  <ul id="choose_columns" class="choose_columns">
    <input id="apply_button" class="apply_select" value="Apply" type="button" onclick="applyColumns()">
    <input id="cancel_button" class="cancel_select" value="Cancel" type="button" onclick="hideColumns()">
  </ul>
</div>
<table id="results" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Url</th>
      <th>case</th>
      <th>Status</th>
      <th>sit</th>
      <th>bro</th>

    </tr>
    <tbody>
      <tr>
        <td>url1</td>
        <td>case1</td>
        <td>Failed</td>
        <td>China</td>
        <td>FF</td>

      </tr>
      <td>url2</td>
      <td>case2</td>
      <td>pas</td>
      <td>us</td>
      <td>ff</td>

      </tr>
  </thead>
</table>

Answer 1

通常，当数据表的destroy属性未设置为true时，会弹出错误“无法重新初始化数据表”。将destroy属性设置为true。

var table = $('#results').DataTable({
 destroy: true
});

Answer 2

我更新如下所示的javascript列表，如果再次单击“应用”按钮，仍然出现相同的错误：DataTables警告：表id =结果-无法重新初始化DataTable。我不知道为什么。

function applyColumns(){
      var selected = [];
      var column;
      var i;

      var table = $('#results').DataTable( {
        destory: true

    } );
      <!-- $('#items input:checked)') -->
      $('ul#items input:not(:checked)').each(function(){
        selected.push($(this).attr('data-column'));

      });


      for(i=0;i<selected.length;i++)
      {
      column = table.column(selected[i]);
        if (column.visible())
          {
            column.visible( false );
          }

      }

    }

如何使用复选框显示/隐藏数据表中的列？

2 个答案: