Come aggiornare jquery datatable dopo l'eliminazione di una riga

Question

Ogni riga nella tabella dati ha un pulsante di eliminazione.

Su clic del tasto di cancellazione, io chiamo questo codice:

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

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

L'url è l'azione del controller che prende l'Es e cancella i dati dal database. Che funzioni. Ora desidero chiamare la funzione di aggiornamento/ridisegno di datatable in modo che possa caricare nuovi risultati ma non funziona.

Datatable è:

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


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

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

}); 

Qualcuno può consiglio?

Answer 1

Citato dal API datatable page - sulla fnReloadAjax() proiettile:

Nota: Per ricaricare dati quando si utilizza l'elaborazione lato server, basta usare il funzione built-in API fnDraw piuttosto che questo plug-in.

Pertanto, è preferibile utilizzare fnDraw.

[EDIT] In realtà, l'ordine delle chiamate dovrebbe essere:

// 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

La risposta qui non ha funzionato per me, quindi ho usato questo:

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

Aggiungere questo in un file:

$.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); 
}; 

Includi il file nella tua pagina e chiama come this:

Answer 3

Sono stato in grado di risolvere questo problema con un approccio molto semplice rispetto a quello fornito nelle risposte precedenti.

Ajax chiamata a cancellare i dati dal back-end

Prima di tutto cancellare i dati dal back-end con una normale chiamata AJAX asincrona.

Elimina dal frontend DataTable

Prendi il TR riga che si desidera eliminare e utilizzare la funzione datatable fnDeleteRow per eliminare questa riga. Ciò aggiornerà automaticamente la tabella in modo che non sia necessario alcun fnDraw o altro materiale.

//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); 

e si è fatto .. :-)

Answer 4

Uso istanza di dataTable e rimuovere fila dal DataTable

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