Фильтры нескольких таблиц

Question

Я хочу фильтровать в этой таблице более одного раза одновременно. Это происходит, когда я ввожу код $table.find('tbody tr:visible');, но он искажается, когда я использую backspace в фильтрующей части, потому что он ищет только в видимом TR. (Оригинал: $table.find('tbody tr');)

Как я могу решить эту проблему?

$(document).ready(function() {
  $('.filterable .btn-filter').click(function() {
    var $panel = $(this).parents('.filterable'),
      $filters = $panel.find('.filters input'),
      $tbody = $panel.find('.table tbody');
    if ($filters.prop('disabled') == true) {
      $filters.prop('disabled', false);
      $filters.first().focus();
    } else {
      $filters.val('').prop('disabled', true);
      $tbody.find('.no-result').remove();
      $tbody.find('tr').show();
    }
  });

  $('.filterable .filters input').keyup(function(e) {
    /* Ignore tab key */
    var code = e.keyCode || e.which;
    if (code == '9') return;
    /* Useful DOM data and selectors */
    var $input = $(this),
      inputContent = $input.val().toLowerCase(),
      $panel = $input.parents('.filterable'),
      column = $panel.find('.filters th').index($input.parents('th')),
      $table = $panel.find('.table'),
      $rows = $table.find('tbody tr');
    /* Dirtiest filter function ever ;) */
    var $filteredRows = $rows.filter(function() {
      var value = $(this).find('td').eq(column).text().toLowerCase();
      return value.indexOf(inputContent) === -1;
    });
    /* Clean previous no-result if exist */
    $table.find('tbody .no-result').remove();
    /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
    $rows.show();
    $filteredRows.hide();
    /* Prepend no-result row if all rows are filtered */
    if ($filteredRows.length === $rows.length) {
      $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="' + $table.find('.filters th').length + '">No result found</td></tr>'));
    }
  });
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
  <h3>The columns titles are merged with the filters inputs thanks to the placeholders attributes</h3>
  <hr>
  <p>Inspired by this <a href="http://bootsnipp.com/snippets/featured/panel-tables-with-filter">snippet</a></p>
  <div class="row">
    <div class="panel panel-primary filterable">
      <div class="panel-heading">
        <h3 class="panel-title">Users</h3>
        <div class="pull-right">
          <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button>
        </div>
      </div>
      <table class="table">
        <thead>
          <tr class="filters">
            <th><input type="text" class="form-control" placeholder="#" disabled></th>
            <th><input type="text" class="form-control" placeholder="First Name" disabled></th>
            <th><input type="text" class="form-control" placeholder="Last Name" disabled></th>
            <th><input type="text" class="form-control" placeholder="Username" disabled></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Markos</td>
            <td>Ottoass</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacobos</td>
            <td>Thorntonass</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

https://jsfiddle.net/b0vj6p4n/

Answer 1

jquery.Datatables можно использовать, он имеет различные функции, связанные с поиском, сортировкой и загрузкой данных.

На сайте есть немало примеров для начала загрузки данных и настройки таблицы: https://datatables.net/examples/basic_init/zero_configuration.html

Следующий фрагмент можно использовать для настройки таблицы как таблицы данных:

$(document).ready(function() {
    $('#example').DataTable();
} );