Datatables clear tbody

Question

Mam tabelę HTML, którą wypełniam danymi z wywołania jQuery AJAX. Ta tabela używa wtyczki jQuery - datatables do stronicowania, sortowania i tak dalej.

Wezwanie jQuery jest wywoływana z przypadku zmiany 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 
         ] 
        }); 
       } 
      }) 
    }); 

Ten jQuery została edytowana aby go skrócić. To jQuery działa świetnie, pobiera dane i dodaje je do nowych wierszy tabeli, a także aktualizuje datatable plugin, aby działało z nowymi danymi.

Problem jest, że stare dane nadal pozostaje Próbowałem go oczyścić z różnych rzeczy jak

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

I umieścić je przed wywołaniem AJAX. Ale nic nie działa, stare dane wciąż pozostają i za każdym razem, gdy wywołuję wywołanie AJAX, wciąż uzupełnia je nowymi danymi, podczas gdy stary wciąż pozostaje.

Czy istnieje sposób, aby wyczyścić tbody z jQuery lub wbudowaną funkcją datatables?

Answer 1

Odpowiedź zaktualizowane w celu kierowania na interfejs API dataTables 1.10.x. Oryginalna odpowiedź poniżej, wykorzystująca numer fnMethods, była skierowana do wersji 1.9.x, ale nadal jest dostępna dla dowolnego pliku 1.9.x - 1.10.x dataTable().

Gdy DataTable jest tworzony z DataTable() zwracającej wystąpienie API

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

W oryginalnej odpowiedzi przykładowa opróżniania <tbody> całkowicie i wkładanie nowego rzędu:

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

komunikatu draw(). Podczas manipulowania tabelą za pomocą interfejsu API należy wywołać draw(), aby zaktualizować wyświetlacz, aby odzwierciedlić te zmiany.

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

---

Należy użyć

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

Oto przykład z poniższej jsfiddle, usuwając wszystkie treści z <tbody> (z numeracją stron na stole!) I wstawić nowy wiersz:

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

zobaczyć skrzypce ->http://jsfiddle.net/yt57V/

Answer 2

myślę co szukasz jest ten kawałek kodu:

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

Źródło: http://www.datatables.net/forums/discussion/comment/15862

Answer 3

można użyć DataTables funkcjonować fnClearTable i fnAddData jak ten

$("#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

Można użyć funkcji clear() usunięcie wszystkich wierszy danych z tabeli w następujący sposób:

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