Filter Table

by Bianca Kuehweidner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 <input type="text" id="filtertext" onkeyup="FilterFunction('table__UserAdmin_ExistingDistributionChannels')" placeholder="Filter...">

<table id="table__UserAdmin_ExistingDistributionChannels" class="table table-bordered table-responsive-xl existingItemsTable">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">GDS</th>
      <th scope="col">PCC</th>
      <th scope="col">Carrier</th>
      <th scope="col">Code</th>
      <th scope="col">PTC</th>
      <th scope="col">FTC</th>
      <th scope="col" class="text-right">
        <a class="btn btn-primary btn-sm btn-add float-right ml-1">Add Distribution Channel</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="content_name">Published</td>
      <td class="content_gds">FLX</td>
      <td class="content_pcc"></td>
      <td class="content_carrier"></td>
      <td class="content_code"></td>
      <td class="content_ptc"></td>
      <td class="content_ftc">Published</td>
      <td class="text-right">
        <a class="btn btn-warning btn-sm btn-edit editRow">Edit</a>
        <a class="btn btn-danger btn-sm btn-delete deleteRow">Delete</a>
      </td>
    </tr>
    <tr>
      <td class="content_name">Published</td>
      <td class="content_gds">Galileo</td>
      <td class="content_pcc"></td>
      <td class="content_carrier"></td>
      <td class="content_code"></td>
      <td class="content_ptc"></td>
      <td class="content_ftc">Published</td>
      <td class="text-right">
        <a class="btn btn-warning btn-sm btn-edit editRow">Edit</a>
        <a class="btn btn-danger btn-sm btn-delete deleteRow">Delete</a>
      </td>
    </tr>
    <tr>
      <td...

CSS

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

JavaScript

function FilterFunction(tableID) {
    //split the current value of searchInput
    var data = $("#filtertext").val().split(" ");
    //create a jquery object of the rows
    var jo = $("#" + tableID).find("tr");
    if (this.value == "") {
        jo.show();
        return;
    }
    //hide all the rows
    jo.hide();

    //Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    })
    //show the rows that match.
    .show();
});