javascript - 如果有类活动 jQuery，如何删除 DataTable 中的完整行

Question

我使用数据表，我需要隐藏我上课的所有行.fa-active

<em class="fa fa-active" data-title="Active"></em>

我尝试使用这样的代码：

$('tr').each(function () {
    $(this).find('.fa-active').remove();

});

但是这段代码只隐藏了行内的图标，我怎样才能完全隐藏带有这样的元素的行？

<table class="custom-style" id="systemRfidCardsSearchTable">
        <thead class="table-head">
            <tr>
                <th class="checkbox-mark sorting_disabled">
                    <input type="checkbox" class="custom-checkbox" id="checkAll" />
                </th>
                <th class="sorting_disabled"></th>
                <th>@Localizer["Card name"]</th>
                <th>@Localizer["RFID code"]</th>

                <th class="sorting_disabled"></th>
            </tr>
        </thead>
        <tbody class="table-body">
            @foreach (var card in Model.SystemRfidCards)
            {
                <tr>
                    <td>
                        <input type="checkbox" class="custom-checkbox checkbox-mark" id="[e-mail]" />
                    </td>
                    <td>
                        @if (card.IsActive)
                        {
                            <em class="fa fa-check pointer fa-active" data-title="@SharedLocalizer["Active"]"></em>
                        }
                        else
                        {
                            <em class="fa fa-close pointer fa-inactive" data-title="@SharedLocalizer["Inactive"]"></em>
                        }
                    </td>
                    <td>@card.RfidCardName</td>
                    <td>@card.RfidCardCode</td>
                </tr>
            }
        </tbody>
    </table>

标签： javascriptjquery

Answer 1

您可以使用$.fn.dataTable.ext.search..然后在其中添加您的自定义过滤器，即：您需要隐藏的行。所以，如果 tr 有元素，你需要隐藏它，.fa-active你可以使用$(table.row(dataIndex).node()).find('.fa-active').length == 0这将返回所有没有该元素的 trs 并显示它们。

演示代码：

$(document).ready(function() {
  var table = $('#systemRfidCardsSearchTable').DataTable();

  //on click of hide
  $("#hide").click(function() {
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) {

        //find fa-active if length is > 0 
        return $(table.row(dataIndex).node()).find('.fa-active').length == 0;
      }
    );
    table.draw();
  });
  $("#reset").click(function() {
    //reset your changes..
    $.fn.dataTable.ext.search.pop();
    table.draw();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" />
<script type="text/javascript" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<button id="hide">Hide</button>
<button id="reset">Reset</button>
<table class="custom-style" id="systemRfidCardsSearchTable">
  <thead class="table-head">
    <tr>
      <th class="checkbox-mark sorting_disabled">
        <input type="checkbox" class="custom-checkbox" id="checkAll" />
      </th>
      <th class="sorting_disabled"></th>
      <th>@Localizer["Card name"]</th>
      <th>@Localizer["RFID code"]</th>

      <th class="sorting_disabled"></th>
    </tr>
  </thead>
  <tbody class="table-body">

    <tr>
      <td>
        <input type="checkbox" class="custom-checkbox checkbox-mark" id="[e-mail]" />
      </td>
      <td>

        <em class="fa fa-check pointer fa-active" data-title="@SharedLocalizer[" Active "]"></em>

      </td>
      <td>Active</td>
      <td>@card.RfidCardCode</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="custom-checkbox checkbox-mark" id="[e-mail]" />
      </td>
      <td>

        <em class="fa fa-close pointer fa-inactive" data-title="@SharedLocalizer[" Inactive "]"></em>

      </td>
      <td> INactive</td>
      <td>@card.RfidCardCode</td>
    </tr>

  </tbody>
</table>