Как обновить jquery datatable после удаления строки

Question

Каждая строка в таблице данных имеет кнопку удаления.

По щелчку кнопки удаления, я называю этот код:

$('.deleteButton').live('click', function() { 

      var $this = $(this); 
      var url = $this.attr("id"); 
      $("#example").fnReloadAjax(); 
      $.getJSON(url, Success()); 
     }); 

URL-адресом является действием контроллера, который принимает идентификатор и удаляет данные из базы данных. Это работает. Теперь я хочу вызвать функцию refresh/redraw datatable, чтобы она могла загружать новые результаты, но она не работает.

Datatable является:

$("#example").dataTable({ 
      "aoColumns": [ 
        { "sTitle": "Id" }, 
         { "sTitle": "Name" }], 


      "bProcessing": true, 
      "bServerSide": true, 

      "sAjaxSource": '@Url.Action("FetchData", "Home")', 
      "sPaginationType": "full_numbers", 

}); 

Может кто-нибудь, пожалуйста, совет?

Answer 1

Цитируется API datatable page - на fnReloadAjax() пули:

Примечание: Для загрузки данных при использовании обработки на стороне сервера, просто использовать встроенные функции API fnDraw, а не этого плагина.

Таким образом, вы, вероятно, лучше использовали бы fnDraw.

[EDIT] На самом деле, порядок вызовов должен быть:

// you don't have to use $.json because you don't use the downloaded data 
// first, ask the server to delete the data 
$.ajax({ 
    url: urlToDelete, 
    success: function() { 
     // if it worked, ask datatable to redraw the table with the new data 
     $("#example").dataTable().fnDraw(); 
     // if this js function does anything useful (like deleting the row), then call it: 
     Success(); 
    }, 
    error: function() { 
     // display any error (like server couldn't be reached...), or at least try to log it 
    } 
}); 

Answer 2

Ответ здесь не работает для меня, так что я использовал это:

http://datatables.net/plug-ins/api#fnReloadAjax

Добавить это к файлу:

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) 
{ 
    if (sNewSource !== undefined && sNewSource !== null) { 
     oSettings.sAjaxSource = sNewSource; 
    } 

    // Server-side processing should just call fnDraw 
    if (oSettings.oFeatures.bServerSide) { 
     this.fnDraw(); 
     return; 
    } 

    this.oApi._fnProcessingDisplay(oSettings, true); 
    var that = this; 
    var iStart = oSettings._iDisplayStart; 
    var aData = []; 

    this.oApi._fnServerParams(oSettings, aData); 

    oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) { 
     /* Clear the old information from the table */ 
     that.oApi._fnClearTable(oSettings); 

     /* Got the data - add it to the table */ 
     var aData = (oSettings.sAjaxDataProp !== "") ? 
      that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json; 

     for (var i=0 ; i<aData.length ; i++) 
     { 
      that.oApi._fnAddData(oSettings, aData[i]); 
     } 

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 

     that.fnDraw(); 

     if (bStandingRedraw === true) 
     { 
      oSettings._iDisplayStart = iStart; 
      that.oApi._fnCalculateEnd(oSettings); 
      that.fnDraw(false); 
     } 

     that.oApi._fnProcessingDisplay(oSettings, false); 

     /* Callback user function - for event handlers etc */ 
     if (typeof fnCallback == 'function' && fnCallback !== null) 
     { 
      fnCallback(oSettings); 
     } 
    }, oSettings); 
}; 

Включите этот файл на свою страницу и позвоните, это:

// Example call to load a new file 
oTable.fnReloadAjax('media/examples_support/json_source2.txt'); 

// Example call to reload from original file 
oTable.fnReloadAjax(); 

Answer 3

Я смог решить эту проблему с помощью очень простого подхода, чем в приведенных выше ответах.

Ajax вызов для удаления данных из внутреннего интерфейса

Прежде всего удалить данные из внутреннего интерфейса с помощью обычного Аякса асинхронного вызова.

Удалить из фронтэнда DataTable

Получить строку TR, который вы хотите удалить, и использовать DataTable функцию fnDeleteRow чтобы удалить эту строку. Это автоматически обновит таблицу, так что вам не понадобится fnDraw или другие вещи.

//in my case its delete button which was clicked 
//so I got its parents parent which is TR row 
var row = $(this).parent().parent(); 


$('DATA TABLE SELECTOR').dataTable().fnDeleteRow(row); 

И вы сделали .. :-)

Answer 4

Используйте экземпляр DataTable и удалить строки из DataTable

dataTable.fnDeleteRow($(that).closest('tr').remove()); 
dataTable.fnDraw();