Question

我有一堆引导选项卡（使用knockout动态生成），每个选项卡内容区域都有一个表（使用knockout动态生成）。我在选项卡面板顶部有一个复选框，表示＆＃34;启用分页＆＃34;。选中此框将执行一个函数，jquery数据表https://datatables.net显示出来，一切看起来都很棒。当我取消检查盒子时，它不会消失。请注意我只想删除数据表（分页，搜索和所有这些）而不是实际数据。这是代码：

                $('#isPagingEnabled').click(function () {
                    if(this.checked){
                        showPaging();
                    }
                    else
                    {
                        hidePaging();
                    }
                });


                function showPaging(){
                    $('table').filter(function(index){
                        $('#dataTable'+index).dataTable(); //this works perfectly..
                    });

                }

                function hidePaging(){ // **this is not hiding / removing datatables**
                    $('table').filter(function(index){
                        $('#dataTable'+index).dataTable( {
                            "retrieve": true,
                            "destroy": true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false
                        } );
                    });

                }

Answer 1

使用jquery，您可以使用函数prop（）来检查复选框的“状态”。例如：

if($(this).prop('checked')){
 showPaging();
}

Answer 2

评估是否选中此框的最佳方法是

$('#isPagingEnabled').click(function () {
  if($(this).is(':checked')) {
    showPaging();
  } else {
    hidePaging();
  }
});

要销毁dataTable，请更改hidePaging功能：

function hidePaging() {
   $('table').filter(function(index) {
     $('#dataTable'+index).DataTable().destroy();
   });
});

我在此处找到了相关信息：https://datatables.net/reference/api/destroy()

您正在重新初始化dataTable。

Answer 3

我必须更改hidePaging（）函数并将调用添加到fnDestroy（false）并且它有效。

                 function hidePaging(){
                    $('table').filter(function(index){
                        var dt =   $('#dataTable'+index).dataTable( {
                            "retrieve": true,
                            "destroy": true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false
                        } ).**fnDestroy(false)**;
                    });
                }

Jquery Datatable显示/隐藏

3 个答案: