How to remove complete row in DataTable if have class active jQuery

user_9455275 0
Viewed 228

I work with datatable and i need to hide all rows in which i have class .fa-active

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

i try to use such code:

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

});

But this code only hide icon inside row, how i can completly hide row with such element?

<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="checkbox_@card.RfidCardId" />
                    </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>
jquery javascript
1 Answers

You can use $.fn.dataTable.ext.search.. and then inside this add your custom filter i.e : row which you need to hide . So , as you need to hide tr if it has .fa-active element you can use $(table.row(dataIndex).node()).find('.fa-active').length == 0 this will return all trs which doesn't have that element and show them.

Demo Code :

$(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="checkbox_@card.RfidCardId" />
      </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="checkbox_@card.RfidCardId" />
      </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>

user_106064000
Related