web-dev-qa-db-ja.com

データテーブルはtbodyをクリアします

AJAX jQuery呼び出しからのデータを入力するHTMLテーブルがあります。このテーブルはjQueryプラグインを使用します-ページング、ソートなどのデータテーブル。

JQuery呼び出しは、ドロップダウンリスト変更イベントから呼び出されます

$("#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
                        ]
                    });
                }
            })
    });

このjQueryは、短縮するために編集されています。このjQueryは優れた機能を発揮し、データを取得して新しいテーブル行に追加すると同時に、データテーブルプラグインを更新して新しいデータで動作するようにします。

問題は、古いデータがまだ残っているということです。

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

AJAX呼び出しの前にこれらを配置します。しかし、何も機能せず、古いデータはまだ残ります。また、AJAXデータは古いままです。

JQueryまたは組み込みのデータテーブル関数でtbodyをクリアする方法はありますか？

jquerydatatablesjquery-datatables
17
HenrikP

DataTables 1.10.x APIを対象とするために更新された回答。以下のfnMethodsを使用した元の答えは1.9.xを対象としていましたが、1.9.x-1.10.x dataTable()にも適用可能です。

APIインスタンスを返すDataTable()でdataTableがインスタンス化される場合：

_var dataTable = $('#example').DataTable();
_

元の答えとして、_<tbody>_を完全に空にして新しい行を挿入する例：

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

draw()に注意してください。 APIを介してテーブルを操作する場合、draw()を呼び出して表示を更新し、それらの変更を反映する必要があります。

デモ->http://jsfiddle.net/9kLmb9fu/

あなたが使用する必要があります

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

以下はjsfiddleの例で、（ページ分割されたテーブルの）_<tbody>_からすべてのコンテンツを削除し、新しい行を挿入します：

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

フィドルを参照->http://jsfiddle.net/yt57V/

38
davidkonrad

clear() 関数を使用して、次のようにテーブルからすべてのデータ行を削除できます。

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

このようにDataTables関数fnClearTableとfnAddDataを使用できます

$("#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
                    ]
                });
                */
            }
        })
});
6
Abraham Uribe

あなたが探しているのは次のコードだと思います：

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

ソース： http://www.datatables.net/forums/discussion/comment/15862

3
G.Mendes