Question

我正在使用带有jquery dataTable插件的表。当我使用函数fnAddData时它可以工作，除非表是空的。然后，我收到了这个错误：

无法读取未定义的属性'className'

这是我添加数据的方式：

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

Answer 1

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

那么你的餐桌有什么不同？当你说“空”时，是否还有一个thead / tr / th部分和一个空的tbody部分？这些是数据表正常工作所必需的。

$('#dt').dataTable();

$('#btn').on('click',function() { addData(); });

function addData()
{
    $("#dt").dataTable().fnAddData([
            "col 1", "col 2", "col 3"]);
}

Answer 2

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

DataTables想要一个节点。

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

故事的寓意是，如果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：

只需隐藏您要删除的行
如果这些想法无效，您可能会发现allan's answers here具有洞察力。

当表为空时，不能使用fnAddData

2 个答案: