当表为空时，无法使用 fnAddData

Cannot use fnAddData when table is empty

本文关键字：fnAddData      更新时间：2023-09-26

我正在使用带有jquery dataTable插件的表。当我使用该函数时，它fnAddData它有效，除非表为空。然后，我收到此错误：

无法读取未定义的属性"类名"

这是我添加数据的方式：

$("#table-1").dataTable().fnAddData([
            data[0],
            data[1],
            data[2],
            data[3],
            data[4],
            data[5],
            data[6],
            data[7],
            data[8],
            ]);

我有同样的问题 fnDeleteRow 并显示此错误消息：

无法读取未定义的属性"nTr"

这是我如何使用fnDeleteRow，当表不空时我没有问题......

$("#table-1").dataTable().fnDeleteRow(tr)

其中 tr 是选择器。

我错过了什么吗？

这是我的 HTML 选项卡，最后一行：

<table id="table-1" class="table table-hover table-nomargin table-colored-header        dataTable" aria-describedby="table-1_info">
<thead>
<tr role="row">
<th class="sorting" role="columnheader" tabindex="0" aria-controls="table-1" rowspan="1" colspan="1">Pays</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class=" sorting_1">
<div id="address23name">test</div>
</td></tr></tbody></table>

这是我的 JS

$("#deleteAddressButton").click(function(){
    var id = $("#deleteAddressId").val();
    $.post("/Contacts/deleteAddress",
            {data: id}, function(data) {
          var id = $.parseJSON(data);
          var tr = $("tr:has(td:has(div:contains('"address'" + id + '"Name'")))");
          $("#table-1").dataTable().fnDeleteRow(tr)
        });
})

jQuery 不允许 DataTables 以它喜欢的方式访问数据。为了给它提供它想要的节点，你可能需要将 [0] 或 .get（0） 应用到 jQuery 对象的末尾。这实际上是jQuery返回的 - 一个对象 - 通常正是你喜欢使用的内容。

数据表需要一个节点。

以下是一些链接，显示开发人员提供了有关如何在不同情况下访问数据的提示 - 但在第二个链接中存在相同的错误：这里和这里

这个故事的寓意是，如果 DataTables 期待一个表"节点"，你需要做一些额外的步法来删除它所在的额外 jQuery 容器。

因此，您的

代码看起来像这样，我相信应该处理您的错误情况。否则，请务必在 DataTables.net 上搜索错误和函数名称。该论坛非常活跃和有益。

var tr = $("tr:has(td:has(div:contains('"address'" + id + '"Name'")))");
$("#table-1").dataTable().fnDeleteRow(tr[0])

或

var tr = $("tr:has(td:has(div:contains('"address'" + id + '"Name'")))");
$("#table-1").dataTable().fnDeleteRow(tr.get(0))

或者，当然，将其添加到冗长的$("tr:has...)声明的末尾。

选项 2：

  • 只需隐藏要删除的行
  • 如果这些想法没有帮助，你可能会发现艾伦在这里的回答很有见地。

下面是一个简单的 jsfiddle，它允许您向空表添加一行：http://jsfiddle.net/7UZGM/

那么，您的餐桌有什么不同呢？当你说"空"时，它仍然有一个头/tr/th部分和一个空的tbody部分吗？这些是数据表正常工作所必需的。

$('#dt').dataTable();
$('#btn').on('click',function() { addData(); });
function addData()
{
    $("#dt").dataTable().fnAddData([
            "col 1", "col 2", "col 3"]);
}
相关文章：