Datatables clear t.

Question

Ho una tabella HTML che riempio con dati da una chiamata jQuery AJAX. Questa tabella utilizza il plugin jQuery - i dati per il paging, l'ordinamento e così via.

La chiamata jQuery viene chiamato da un evento di modifica DropDownList

$("#Dropdownlist").on("change", function() { 
     $.ajax({ 
       type: "POST", 
       url: "@Url.Action("Action", "Controller")", 
       //contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        $.each(data, function (key, item) { 
         $("tbody").append("<tr><td>appending data here</td></tr>"); 
        }); 

        $('#table').dataTable().fnDestroy(); 
        $('#table').dataTable({ 
         "aoColumns": [ 
          { "bSortable": false }, 
          null, null, null, null, null 
         ] 
        }); 
       } 
      }) 
    }); 

Questo jQuery è stato modificato per accorciarlo. Questo jQuery funziona alla grande, ottiene i dati e li aggiunge nelle nuove righe della tabella, aggiornando anche il plugin datatable per farlo funzionare con i nuovi dati.

Il problema è che i vecchi dati ancora rimane, ho cercato di pulirlo con le varie cose come

$("#tbodyID tr").detach(); 
$("#tbodyID tr").remove(); 
$("#tbodyID").empty(); 
$("#tbodyID").html(""); 
$("tbody").empty(); 
$("tbody").html(""); 
$('#table').dataTable().fnDraw(false) 

ho messo questi prima della chiamata AJAX. Ma nessuno funziona, i vecchi dati rimangono e ogni volta che chiamo la chiamata AJAX, continua a ricaricarla con nuovi dati mentre il vecchio rimane ancora.

C'è un modo per cancellare il tbody con jQuery o una funzione di dati integrata?

Answer 1

risposta aggiornato al fine di targetizzare l'API 1.10.x DataTables. La risposta originale sotto fnMethods aveva come target 1.9.x ma è ancora applicabile per qualsiasi 1.9.x - 1.10.x dataTable().

Quando un dataTable viene istanziata con DataTable() che restituisce un'istanza API:

var dataTable = $('#example').DataTable(); 

Poiché la risposta iniziale un esempio di svuotamento <tbody> interamente ed inserendo una nuova riga:

$("#delete").click(function() { 
    dataTable.clear(); 
    dataTable.row.add([ 
     'new engine', 
     'new browser', 
     'new platform', 
     'new version', 
     'new css' 
    ]).draw(); 
}); 

Avviso draw(). Quando una tabella viene manipolata tramite l'API, è necessario chiamare draw() per aggiornare il display per riflettere tali modifiche.

demo ->http://jsfiddle.net/9kLmb9fu/

---

Si dovrebbe usare

$('#table').dataTable().fnClearTable(); 

Ecco un esempio dalla jsfiddle sotto, l'eliminazione di tutti i contenuti da <tbody> (su un tavolo impaginato!) E inserire una nuova riga:

$("#delete").click(function() { 
    dataTable.fnClearTable(); 
    dataTable.fnAddData([ 
     'new engine', 
     'new browser', 
     'new platform', 
     'new version', 
     'new css' 
    ]); 
}); 

vedere violino ->http://jsfiddle.net/yt57V/

Answer 2

Penso che quello che stai cercando è questo pezzo di codice:

var oSettings = $('#table').dataTable().fnSettings(); 
var iTotalRecords = oSettings.fnRecordsTotal(); 
for (i=0;i<=iTotalRecords;i++) { 
    $('#table').dataTable().fnDeleteRow(0,null,true); 
} 

Fonte: http://www.datatables.net/forums/discussion/comment/15862

Answer 3

è possibile utilizzare DataTable funzionano fnClearTable e fnAddData come questo

$("#Dropdownlist").on("change", function() { 
    $.ajax({ 
      type: "POST", 
      url: "@Url.Action("Action", "Controller")", 
      //contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       var oTable = $('#table').dataTable();//get the DataTable 
       oTable.fnClearTable();//clear the DataTable 
       $.each(data, function (key, item) { 
        oTable.fnAddData(["appending ","data","here"]);//add new row 
        //each element in the array is a td 
       }); 
       /*no need to destroy and create new DataTable 
       $('#table').dataTable().fnDestroy(); 
       $('#table').dataTable({ 
        "aoColumns": [ 
         { "bSortable": false }, 
         null, null, null, null, null 
        ] 
       }); 
       */ 
      } 
     }) 
}); 

Answer 4

È possibile utilizzare la funzione di clear() per rimuovere tutte le righe di dati dalla tabella come segue:

var table = $('#example').DataTable(); 
table.clear().draw();