無法使用「另一個DataTables列過濾器」插件破壞（）

Question

我使用DataTables和YADCF來過濾表。

在某些時候，我需要暫時從我的表中解除兩個插件的綁定，然後再綁定它們。如果我不使用YADCF，我可以銷燬數據表並重新初始化它。但是，當我使用YADCF時，表格的過濾器部分不會被銷燬。

HTML：

<a href="#" id="create">Create</a> | <a href="#" id="destroy"> Destroy</a> 

<table id="mytable" class="results table table-striped"> 
    <thead> 
     <tr> 
      <th>Head 1</th> 
      <th>Head 2</th> 
      <th>Head 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>12</td> 
      <td>13</td> 
      <td>14</td> 
     </tr> 
     <tr> 
      <td>12</td> 
      <td>13</td> 
      <td>14</td> 
     </tr> 
     <tr> 
      <td>152</td> 
      <td>13</td> 
      <td>154</td> 
     </tr> 
     <tr> 
      <td>1762</td> 
      <td>1873</td> 
      <td>1874</td> 
     </tr> 
     <tr> 
      <td>124</td> 
      <td>1343</td> 
      <td>1124</td> 
     </tr> 
    </tbody> 
</table> 

JS不YADCF JSFIDDLE：與YADCF

var oTable = $('table'); 

$('#create').click(function (e) { 
    e.preventDefault(); 
    oTable.dataTable({ 
     "bJQueryUI": true, 
      "bStateSave": true, 
      "bPaginate": false, 
      "bAutoWidth": false, 
    }); 

}); 

$('#destroy').click(function (e) { 
    e.preventDefault(); 
    oTable.fnDestroy(); 
    oTable.attr('class', ''); 
}); 

JS JSFIDDLE：

var oTable = $('table'); 

$('#create').click(function (e) { 
    e.preventDefault(); 
    oTable.dataTable({ 
     "bJQueryUI": true, 
      "bStateSave": true, 
      "bPaginate": false, 
      "bAutoWidth": false, 
    }); 


    // Add YADCF 
    oTable.yadcf([{ 
     column_number: 1, 
     filter_type: 'range_number', 
     ignore_char: 'm' 
    }, { 
     column_number: 2, 
     filter_type: 'text', 
     filter_default_label: ' ' 
    }, 
    ]); 


}); 

$('#destroy').click(function (e) { 
    e.preventDefault(); 
    oTable.fnDestroy(); 
    oTable.attr('class', ''); 
}); 

任何人都可以建議如何銷燬YADCF濾波器？

Answer 1

所以，這其實是一個錯誤存在。

Issue Submitted | Workaround JSFiddle

JS：

var oTable = $('table'); 
var first = true; 

$('#create').click(function (e) { 

    e.preventDefault(); 
    oTable.dataTable({ 
     "bJQueryUI": true, 
      "bStateSave": true, 
      "bPaginate": false, 
      "bAutoWidth": false 
    }); 

    if (first) { 
     first = false; 
     // Add YADCF 
     oTable.yadcf([{ 
      column_number: 1, 
      filter_type: 'range_number', 
      ignore_char: 'm' 
     }, { 
      column_number: 2, 
      filter_type: 'text', 
      filter_default_label: ' ' 
     } ]); 
    } else { 
     oTable.find('thead').find('[id^=yadcf-filter-wrapper-table]').each(function (i, v) { 
      var cloned = $(this).clone(true); 
      console.log($(this)); 
      $(this).closest('th').append(cloned); 
      $(this).remove(); 
      oTable.find('.DataTables_sort_wrapper').css('display', 'inline-block'); 
     }); 
     oTable.find('[id^=yadcf]').show(); 
    } 

}); 

$('#destroy').click(function (e) { 
    e.preventDefault(); 
    oTable.fnDestroy(); 
    oTable.attr('class', ''); 
    oTable.off(); 
    oTable.find('[id^=yadcf]').hide(); 
    oTable = $('table'); 
}); 

$('#add-row').click(function (e) { 
    e.preventDefault(); 
    $('table').append('<tr><td>' + getRandom() + '</td><td>' + getRandom() + '</td><td>' + getRandom() + '</td></tr>'); 
}); 

function getRandom() { 
    return parseInt(10000 * Math.random(), 10); 
} 

Answer 2

嘗試以下：

$('#destroy').click(function (e) { 
    e.preventDefault(); 
    oTable.Destroy(); 
    oTable.attr('class', ''); 
});