Удаляется DataTable строки добавляется снова после сортировки

Question

Я использую DataTables JQuery плагин для отображения таблицы HTML и я сделал функцию удаления AJAX строки, которая отправляет запрос на удаление POST в фоновом режиме и отображает возвращенное HTML сообщения в #info div и удаляет соответствующий номер HTML из DOM с использованием функции jQuery remove().

Вот функция, которая вызывается, как deleteData($id) от удаления кнопки в строке и:

function deleteData(id) 
{ 
    var data = "id="+id; 

    $.ajax(
     { 
      type: "POST", 
      url: "delete.php", 
      data: data 
     } 
    ).done 
    (
     function(data) 
     { 
      $('#info').html(data); 

      var setID = id; 

      $('#row' + setID).remove();   
     } 
    ); 
} 

Все работает хорошо до сих пор, строка удаляется и отображается ответное сообщение, однако, когда я нажимаю заголовок снова сортируйте строки (по возрастанию или по убыванию), удаленная строка снова появляется (в текущем сеансе, а не после перезагрузки страницы), и она по-прежнему доступна для поиска, я хочу это исправить.

Из того, что я прочитал, проблема заключается в том, что DataTables загружает таблицу только один раз, но есть способ загрузить ее из DOM в каждом виде. Я пробовал много разных способов сделать это, но он не работает.

Answer 1

Я никогда не использовал DataTable раньше, но читая ваш вопрос Мне было любопытно узнать немного.

Потом я заметил, что вы удаляете строку только с помощью JQuery .remove() на данной строке (другими словами, снимающих реальный открытой DOM строки), в то время как this DataTable page говорится, вы должны использовать специальный .row().remove().

Итак, в вашем примере, я думаю, вы должны заменить $('#row' + setID).remove(); на yourDataTable.row($('#row' + setID)).remove();.

EDIT.
Благодаря замечанием @Bryan Рэмси, я просто понял, что предложенное решение было неполным:

• заявление используется OP $('#row' + setID).remove();только удаляет строку из DOM, но сохраняет его в DataTable объекта так он снова появляется снова
• , тогда я предложил скорее использовать yourDataTable.row($('#row' + setID)).remove();, который действительно удаляет строку из объекта DataTable, , но теперь сохраняет ее в DOM, чтобы она не визуально исчезла до того, как произойдет следующее изменение!
• поэтому реальное полное решение - yourDataTable.row($('#row' + setID)).remove().draw();, где draw() гарантирует, что строка немедленно исчезнет.

Примечание: (если вы получаете .row не является функцией или $ DataTable не определен) Вы должны reintialize ваш DataTable перед удалением строки, как

var $datatable = $('#datatable-selector').DataTable(); 
$datatable.row($deletingRowSelector).remove().draw(); 

Answer 2

Вы должны удалить его сформировать APi это сам, как это когда «таблица» вызывается:

var table = $('#yourDatatableId').DataTable(); 

Тогда:

...done 
    (
     function(data) 
     { 
      //No need for these: 
      //$('#info').html(data);  
      //var setID = id; 

      table.row($(this).parents('tr')).remove().draw();  
     } 
    );