Jquery DataTable 删除仅适用于第一行

Question

我有一个 table 有几行

我想删除所有包含 'Rabat' 作为城市的行，但没有任何反应。但是，当我更改第一行的值时，它起作用了。 那么为什么它只适用于第一行？

这是我的代码：

$("#btnSave").click(function() { 
       var table = $("#mainTable").DataTable({});
       var nodes = [];

       table.rows().every(function(rowIdx, tableLoop, rowLoop) {
          if (this.data()[3] == 'Rabat') 
              nodes.push(this.node())
       })
       nodes.forEach(function(node) {
          table.row(node).remove().draw()
       })
});

HTML代码：

<table id="mainTable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Country</th>
                                <th>City</th>
                            </tr>
                        </thead>
                        @foreach (var item in Model)
                        {
                            <tbody>
                                <tr>
                                    <td>@item.id</td>
                                    <td>@item.name</td>
                                    <td>@item.country</td>
                                    <td>@item.city</td>
                                </tr>
                            </tbody>
                        }
     </table>

Answer 1

您不小心创建了多个 <tbody> 的

@foreach (var item in Model)
{
<tbody>
   <tr>
      <td>@item.id</td>
      <td>@item.name</td>
      <td>@item.country</td>
      <td>@item.city</td>
   </tr>
</tbody>
}

应该是

<tbody>
@foreach (var item in Model)
{
   <tr>
      <td>@item.id</td>
      <td>@item.name</td>
      <td>@item.country</td>
      <td>@item.city</td>
   </tr>
}
</tbody>

DataTables 一次只能处理一个 <tbody>，这就是为什么它只适用于第一行。

除此之外，您应该在检索 dataTable 实例时使用 var table = $("#mainTable").DataTable()；如果您使用大括号，即传递一个对象，您也会不小心重新初始化 table。