Filtrado JQuery - Botones y Búsqueda

Aug 25 2020

Estoy buscando filtrar esta tabla con AMBOS botones en los que se puede hacer clic "y" búsqueda de entrada. Tengo un grupo de botones donde cada botón tiene un evento onclick para filtrar las filas y la búsqueda filtra las filas con la función keyup. Cada uno trabaja por separado pero me gustaría que trabajaran juntos.

1.Haga clic en un botón (filas filtradas)

2. Agregar búsqueda de texto (filas visibles filtradas nuevamente)

o viceversa o simplemente el paso 1 o el paso 2

VIOLÍNhttp://jsfiddle.net/rbla/Lh3kpxg2/29/

var $rowsss = $('#table tr:visible');

$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rowsss.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});


$("#all").click(function() {
  var rows = $("#table").find("tr").show();
});

$("#green").click(function() {
  var rows = $("#table").find("tr").hide();
  rows.filter(":contains('Green')").show();
});

$("#orange").click(function() {
  var rows = $("#table").find("tr").hide();
  rows.filter(":contains('Orange')").show();
});

$("#lemon").click(function() {
  var rows = $("#table").find("tr").hide();
  rows.filter(":contains('Lemon')").show();
});

body {
  padding: 20px;
}

input {
  margin-bottom: 5px;
  padding: 2px 3px;
  width: 209px;
  margin-top: 5px;
}

td {
  padding: 4px;
  border: 1px #CCC solid;
  width: 100px;
}

.buttons-wrapper {
  clear: both;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 1%;
}

.my-radio-button {
  position: absolute;
  left: -9999em;
  top: -9999em;
}

.my-radio-button+label {
  float: left;
  padding: .5em 1em;
  cursor: pointer;
  border: 1px solid #28608f;
  margin-right: -1px;
  color: #fff;
  /* background-color: #428bca; */
  background-color: blue;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  /* text-transform: uppercase; */
}

.my-radio-button+label:first-of-type {
  border-radius: .7em 0 0 .7em;
}

.my-radio-button+label:last-of-type {
  border-radius: 0 .7em .7em 0;
}

.my-radio-button:checked+label {
  /* background-color: #3277b3; */
  background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons-wrapper">

  <input type="radio" class="my-radio-button" name="radioButtonTest" value="1" id="all" checked />
  <label for="all">All</label>

  <input type="radio" class="my-radio-button" name="radioButtonTest" value="2" id="green" />
  <label for="green">Green</label>

  <input type="radio" class="my-radio-button" name="radioButtonTest" value="3" id="orange" />
  <label for="orange">Orange</label>

  <input type="radio" class="my-radio-button" name="radioButtonTest" value="4" id="lemon" />
  <label for="lemon">Lemon</label>

</div><br clear="all">

<input type="text" id="search" placeholder="Type to search">

<table id="table">

  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Blue</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Lemon</td>
    <td>Black</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Blue</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Lemon</td>
    <td>Black</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Lemon</td>
    <td>Black</td>
  </tr>

</table>

Respuestas

1 mplungjan Aug 25 2020 at 01:48

Este código ahora

maneja retroceso/campo vacío
maneja hacer clic en un botón mientras el campo de búsqueda está lleno
borrará la búsqueda si hace clic en todo
es bastante SECO

Puede deshacerse de la función titleCase si cambia las ID de los botones para que sean iguales a la segunda columna O si cambia la segunda columna para que tenga la ID en minúsculas como atributo