数据表清除 tbody [英] 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 工作得很好，它获取数据并将它们添加到新的表行中，同时还更新了数据表插件以使其能够处理新数据.

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 或内置的数据表函数来清除 tbody?

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().

当使用返回 API 实例的 DataTable() 实例化 dataTable 时:

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

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

作为原始答案的示例，完全清空 并插入新行:

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/

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