数据表与复选框切换

Posted 2021-05-03

我正在努力使用一个功能，我想用一个带有jQuery的复选框打开/关闭数据表。

如果我没有定义数据表，它实际上有效，然后我没有问题地打开/关闭它。

但我想默认情况下数据表是打开的，然后才能关闭它并重新打开。我正在重新初始化警告。

我有这样的事情：

$('#datatable-switch').on('click',function(){

  if($(this).attr('data-click-state') == 0) {

    $(this).attr('data-click-state', 1);
    showLockersDataTable();

  } else {

    $(this).attr('data-click-state', 0)
    lockersTable.DataTable().destroy();
  }

});

答案

这真的好像没什么问题。你可能搞砸了一些事情

showLockersDataTable();

和

lockersTable.DataTable().destroy();

我无法分析，因为你没有提供showLockersDataTable()和lockersTable。

但你必须像这样解决它：

// Get the jQuery Object for your DataTable
var example =  $('#example');

// Bind listener on the checkbox 
$('#datatable-switch').on('click',function(){

if($(this).attr('data-click-state') == 0) {

      $(this).attr('data-click-state', 1);
      showDataTable(example);

    }
    else {

      $(this).attr('data-click-state', 0)
      hideDataTable(example);
    }
});

两个使用的功能是：

// Declare show and hide functions
function showDataTable(dataTable){

  dataTable.DataTable();

}

function hideDataTable(dataTable){

  dataTable.DataTable().destroy();

}

现在，您在click上的监听器已绑定，您可以在页面加载时启动。

showDataTable();

这是JSFiddle上的working example。