Невозможно уничтожить(), используя плагин «Еще один DataTables Column Filter»

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:

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 с YADCF 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', ''); 
});