Блог

Главная - Вопросы по программированию - Как применить фильтрацию jquery при нажатии на ссылку html

Как применить фильтрацию jquery при нажатии на ссылку html

#javascript #jquery #search #replace #filtering

#javascript #jquery #Поиск #заменить #фильтрация

Вопрос:

Я применил фильтры jQuery к таблице с несколькими сотнями строк, и она отлично работает.

Но я хочу создать несколько ссылок HTML в верхней части таблицы, чтобы пользователи могли щелкнуть по этой ссылке, чтобы применить фильтр (вместо ввода), например. Перечислите все записи с названием города Вашингтон, что-то вроде этого:

Желаемая фильтрация

 <a href="">List all records with city name Washington</a>

Вот код:

 $(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});  
 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<h2>Desired Filtering</h2>

<h3><a href="">List all records with city name Washington</a></h3>

<hr />

<h2>Working Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input id="myInput" type="text" placeholder="Search..">
<br><br>

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@mail.com</td>
      <td>Washington</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@greatstuff.com</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Anja</td>
      <td>Ravendale</td>
      <td>a_r@test.com</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mathew</td>
      <td>Stars</td>
      <td>a_z@test.com</td>
      <td>Washintgon</td>
    </tr>
  </tbody>
</table>

Ответ №1:

таким образом, пользователи могут нажать на эту ссылку, чтобы применить фильтр (вместо ввода)

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

 <a href="#" class='addfilter' data-filter="washington">List all records with city name Washington</a>
  
 $(".addfilter").click(function() {
  var filter = $(this).data("filter");
  $("#myInput").val(filter);
  $("#myInput").trigger("keyup");
  return false;
});

Здесь я присвоил ссылке класс addfilter , чтобы вы могли добавлять новые ссылки без необходимости изменять код. .click Обработчик имеет return false; (или мог бы использовать .preventDefault , чтобы остановить <a> переход ( href='#' также останавливает <a> изменение всей страницы).

Обновленный фрагмент:

 $("#myInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

$(".addfilter").click(function() {
  var filter = $(this).data("filter");
  $("#myInput").val(filter);
  $("#myInput").trigger("keyup");
  return false;
});  
 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<h2>Desired Filtering</h2>

<h3>
  <a href="#" class='addfilter' data-filter="washington">List all records with city name Washington</a>
  <br/>
  <a href="#" class='addfilter' data-filter="new york">List all records with city name New York</a></h3>

<hr />

<h2>Working Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input id="myInput" type="text" placeholder="Search..">
<br><br>

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@mail.com</td>
      <td>Washington</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@greatstuff.com</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Anja</td>
      <td>Ravendale</td>
      <td>a_r@test.com</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mathew</td>
      <td>Stars</td>
      <td>a_z@test.com</td>
      <td>Washintgon</td>
    </tr>
  </tbody>
</table>

Для приведенного выше, чтобы «применить» фильтр, я использовал .trigger("keyup") который вызывает ваш существующий код. Это делается для того, чтобы свести количество изменений к минимуму; на практике вы хотели бы использовать это в своей собственной функции. Вы также можете использовать input вместо keyup , поскольку он будет перехватывать вставку мыши и т.д., Выдавая что-то вроде:

 function applyFilter(value) {
    value = value.toLowerCase();
    $("#myTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
}
$(".addfilter").click(function() {
    var filter = $(this).data("filter");
    $("#myInput").val(filter);
    applyFilter(filter);
    return false;
});
$("#myInput").on("input", function() {
    var value = $(this).val();
    applyFilter(value);
});

Комментарии:

1. Большое спасибо… это именно то, что я искал. Пожалуйста, укажите далее, возможно ли ссылаться на эти «html-ссылки на этой странице» с другой страницы, скажем … этот фрагмент кода работает над page-1.html могу ли я создать ссылку на page-2.html что-то вроде… вашингтон> Посмотреть весь список Вашингтона здесь</a>

2. Конечно, в doc.ready проверьте окно. location.search — есть подробные методы извлечения точного параметра в других ответах на SO — затем поместите это в #myInput и примените фильтр.