Datatables clear tbody

У меня есть таблица HTML, в которой я заполняю данные из вызова jQuery AJAX. В этой таблице используются плагины jQuery-datatables для подкачки, сортировки и т.д.

Вызов 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 отлично работает, он получает данные и добавляет их в новые строки таблицы, а также обновляет плагин datatable, чтобы заставить его работать с новыми данными.

Проблема в том, что старые данные все еще остаются, я пытаюсь очистить их различными вещами вроде

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

Я поставил их перед вызовом AJAX. Но никто не работает, старые данные по-прежнему остаются и каждый раз, когда я вызываю вызов AJAX, он по-прежнему заполняет его новыми данными, а старый остается.

Есть ли способ очистить тело с помощью jQuery или встроенной функции datatables?

Ответ 1

Ответ обновлен, чтобы нацелить API dataTables 1.10.x. Первоначальный ответ ниже, используя fnMethods, был нацелен на 1.9.x, но по-прежнему применим для любого 1.9.x - 1.10.x dataTable().

Когда экземпляр dataTable создается с помощью dataTable(), который возвращает экземпляр API:

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(), чтобы обновить отображение, чтобы отразить эти изменения.

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

Ответ 2

Вы можете использовать функцию clear() для удаления всех строк данных из таблицы следующим образом:

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

Ответ 3

вы можете использовать функцию 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
                    ]
                });
                */
            }
        })
});

Ответ 4

Я думаю, что вы ищете этот кусок кода:

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