数据表清除正文 [英] Datatables clear tbody

问题描述

我有一个HTML表，其中填充了AJAX jQuery调用中的数据.该表使用jQuery插件-用于分页，排序等的数据表.

I have a HTML table that I fill with data from an AJAX jQuery call.This table uses the jQuery plugin - datatables for paging, sorting and so on.

通过下拉列表更改事件调用jQuery调用

The jQuery call gets called from a dropdownlist change event

$("#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插件以使其与新数据一起使用.

This jQuery has been edited to shorten it. This jQuery works great, it gets the data and add them in the new table rows while also updating the datatable plugin to make it work with the new data.

问题在于旧数据仍然存在，我一直在尝试使用诸如此类的各种方法来清理它

The issue is that the old data still remains, I've been trying to clean it up with various things like

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

我把这些放在AJAX调用之前. 但是没有任何效果，旧数据仍然保留，并且每次我调用AJAX调用时，它都会不断用新数据重新填充它，而旧数据仍然保留.

I put these before the AJAX call. But none works, the old data still remains and every time I call the AJAX call, it keeps refilling it with new data while the old still remains.

有没有一种方法可以用jQuery或内置的datatables函数清除提示?

Is there a way to clear the tbody with either jQuery or a inbuilt datatables function?

推荐答案

已更新答案，以便定位dataTables 1.10.x API.以下使用fnMethods的原始答案的目标是1.9.x，但仍适用于任何1.9.x-1.10.x dataTable().

Answer updated in order to target the dataTables 1.10.x API. The original answer below using fnMethods were targeting 1.9.x but is still applicable for any 1.9.x - 1.10.x dataTable().

当使用DataTable()实例化dataTable时，它返回一个API实例:

When a dataTable is instantiated with DataTable() which returns an API instance :

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

最初的答案是完全清空<tbody>并插入新行的示例:

As the original answer an example of emptying <tbody> entirely and inserting a new row :

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

通知draw().通过API处理表格时，有必要调用draw()来更新显示内容，以反映这些更改.

Notice draw(). When a table is manipulated through the API it is necessary to call draw() to update the display in order to reflect those changes.

演示-> http://jsfiddle.net/9kLmb9fu/

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

您应该使用

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

这是下面jsfiddle中的一个示例，它删除了<tbody>中的所有内容(在分页表上！)并插入新行:

Here is an example from the jsfiddle below, deleting all content from <tbody> (on a paginated table!) and insert a new row :

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

请参阅小提琴-> http://jsfiddle.net/yt57V/

see fiddle -> http://jsfiddle.net/yt57V/

这篇关于数据表清除正文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！