Я пытаюсь отфильтровать строки таблицы интеллектуальным способом (в отличие от просто тонны кода, которые в конечном итоге выполняют свою работу), но не хватает вдохновения.

У меня есть 5 столбцов в моей таблице. Вверху каждого есть либо раскрывающийся список, либо текстовое поле, с помощью которого пользователь может фильтровать данные таблицы (в основном, скрывать строки, которые не применяются).

Существует множество плагинов для фильтрации таблиц для jQuery, но ни один из них не работает так, как этот, и это сложная часть: |

3
Jimbo 11 Авг 2010 в 19:05

4 ответа

Лучший ответ

Вот базовый пример фильтра http://jsfiddle.net/urf6P/3/

Он использует селектор jquery: Содержит («некоторый текст») и: не (: содержит («некоторый текст»)), чтобы решить, следует ли показывать или скрывать каждую строку. Это может заставить вас идти в направлении.

ИЗМЕНЕНО, чтобы включить HTML и JavaScript из jsfiddle:

$(function() {    
    $('#filter1').change(function() { 
        $("#table td.col1:contains('" + $(this).val() + "')").parent().show();
        $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});
12
Jeff Treuting 21 Июл 2016 в 04:50

step: 1 напишите следующее в файл .html

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

step: 2 напишите следующее в файл .js

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
0
solanki... 11 Фев 2017 в 15:45

Возможно, это не лучший способ сделать это, и я не уверен насчет производительности, но есть вариант пометить каждый столбец (в каждой строке) идентификатором, начинающимся с идентификатора столбца, а затем уникальным числом, например идентификатор записи.

Например, если у вас есть столбец «Имя производителя» и идентификатор записи 763, я бы сделал что-то вроде следующего:

​​<table id="table1">
    <thead>
        <tr>
            <th>Artist</th>
            <th>Album</th>
            <th>Genre</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="artist-127">Red Hot Chili Peppers</td>
            <td id="album-195">Californication</td>
            <td id="genre-1">Rock</td>
            <td id="price-195">$8.99</td>
        </tr>
        <tr>
            <td id="artist-59">Santana</td>
            <td id="album-198">Santana Live</td>
            <td id="genre-1">Rock</td>
            <td id="price-198">$8.99</td>
        </tr>
        <tr>
            <td id="artist-120">Pink Floyd</td>
            <td id="album-183">Dark Side Of The Moon</td>
            <td id="genre-1">Rock</td>
            <td id="price-183">$8.99</td>
        </tr>
    </tbody>
</table>

Затем вы можете использовать jQuery для фильтрации на основе начала id.

Например, если вы хотите отфильтровать по столбцу Artist:

var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
    if (!regex.test(this.innerHTML)) {
        this.parentNode.style.backgroundColor = '#ff0000';
    }
});
1
Nate Pinchot 11 Авг 2010 в 16:02

Немного улучшив принятое решение, опубликованное Джеффом Трейтингом , возможность фильтрации может быть расширена, чтобы сделать это возможным нечувствительны . Я не принимаю кредит на оригинальное решение или даже улучшение. Идея улучшения была взята из решения, размещенного в другом сообщении SO, предложенного Highway of Life .

Здесь это идет:

// Define a custom selector icontains instead of overriding the existing expression contains
// A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
  return $(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

// Now perform the filtering as suggested by @jeff
$(function() {    
    $('#filter1').on('keyup', function() {  // changed 'change' event to 'keyup'. Add a delay if you prefer
        $("#table td.col1:icontains('" + $(this).val() + "')").parent().show();  // Use our new selector icontains
        $("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide();  // Use our new selector icontains
    });

});
2
Fr0zenFyr 21 Сен 2018 в 11:59