Исправить фильтр для таблиц - PullRequest
Новая
       13

Исправить фильтр для таблиц

0 голосов
/ 15 января 2019

У меня проблемы с попыткой исправить фильтры, которые я использовал для таблиц на моем веб-сайте.
Дело в том, что я поместил фильтр в каждый столбец таблицы, чтобы пользователь мог фильтровать требуемую категорию.

Здесь у меня 2 разные проблемы:

  1. когда я использую фильтр для столбца с номерами (например, если я хочу отфильтровать все поля длиной 20 сантиметров), он иногда берет это значение из другого столбца и показывает его (например, он показывает те ящики, которые имеют глубину 20 сантиметров, но имеют другую длину). Есть ли способ избежать этого и сделать каждый фильтр только с результатами его столбца?
  2. после фильтрации, когда я хочу изменить значение фильтра для поиска других результатов, он не приносит никаких результатов. Это похоже на ошибку или что-то, что не работает должным образом, и я не знаю, как исправить.

Это мой веб-сайт, где вы можете увидеть таблицы и увидеть ошибки, о которых я говорю: http://kickads.mobi/sipea/canastos_cajones.html

Также бывает, что когда вы хотите снова увидеть все строки, фильтр становится пустым. Текст не отображается в раскрывающемся списке. 

function filterText(select) {
  var rex = new RegExp($(select).val());
  if (rex == "/all/") {
    clearFilter()
  } else {

    $('.content:visible').filter(function() {
      return !rex.test($(this).text());
    }).hide();
  }
}

function clearFilter() {
  $('.filterText').val('');
  $('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabla">
  <tr>
    <th>Código</th>
    <th>Descripción</th>
    <th>Medidas (mm)
      <select class='filterText' style='background- 
       color: #d9232d; margin-top: 5px; margin-bottom: 5px; 
      display:inline-block' style='display:inline-block' onchange='filterText(this)'>
        <option disabled selected>Filtro</option>
        <option value='1000x400x50'>1000x400x50</option>
        <option value='all'>Todos</option>
      </select>
    </th>
    <th>Capacidad de carga (kg./m2)
      <select class='filterText' style='background-color: #d9232d; margin-top: 5px; margin-bottom: 
      5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
        <option disabled selected>Filtro</option>
        <option value='500'>500</option>
        <option value='all'>Todos</option>
      </select>
    </th>
    <th>Color
      <select class='filterText' style='background-color: 
       #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
        <option disabled selected>Filtro</option>
        <option value='Blanco'>Blanco</option>
        <option value='Negro'>Negro</option>
        <option value='all'>Todos</option>
      </select>
    </th>
    <th>Material
      <select class='filterText' style='background-color: 
       #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
        <option disabled selected>Filtro</option>
        <option value='Virgen'>Virgen</option>
        <option value='Reciclado'>Reciclado</option>
        <option value='all'>Todos</option>
      </select>
    </th>
  </tr>

  <tr class="content">
    <td>SP0125BL</td>

    <td>Piso plástico relleno</td>

    <td>1000x400x50</td>

    <td>500</td>

    <td>Blanco</td>

    <td>Virgen</td>
  </tr>

  <tr class="content">
    <td>SP0125NE</td>

    <td>Piso plástico relleno</td>

    <td>1000x400x50</td>

    <td>500</td>

    <td>Negro</td>

    <td>Reciclado</td>
  </tr>
</table>

1 Ответ

0 голосов
/ 15 января 2019

Вместо использования: 

$('.content:visible').filter(function() {

вы можете напрямую воздействовать на столбцы: 

var idx = $(select).closest('th').index() + 1; // get current column index....
$('.content:visible td:nth-child(' + idx + ')').filter(function() {


function filterText(select)
{
    var rex = new RegExp($(select).val());
    if(rex =="/all/"){
        clearFilter();
    }else{
        var idx = $(select).closest('th').index() + 1;
        $('.content:visible td:nth-child(' + idx + ')').filter(function() {
            return !rex.test(this.textContent.trim());
        }).closest('tr').hide();
    }
}

function clearFilter() {
    $('.filterText').val('Filtro');
    $('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="tabla">
    <tr>
        <th>Código</th>
        <th>Descripción</th>
        <th>Medidas (mm) <select class='filterText' style='background-color: #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
            <option disabled selected>Filtro</option>
            <option
                    value='1000x400x50'>1000x400x50
            </option>
            <option value='all'>Todos</option>
        </select></th>
        <th>Capacidad de carga (kg./m2) <select class='filterText' style='background-color: #d9232d; margin-top: 5px; margin-bottom:
  5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
            <option disabled selected>Filtro</option>
            <option value='500'>500</option>
            <option value='all'>Todos</option>
        </select></th>
        <th>Color <select class='filterText' style='background-color:
   #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
            <option disabled selected>Filtro</option>
            <option value='Blanco'>Blanco</option>
            <option value='Negro'>Negro</option>
            <option value='all'>Todos</option>
        </select></th>
        <th>Material <select class='filterText' style='background-color:
   #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
            <option disabled selected>Filtro</option>
            <option value='Virgen'>Virgen</option>
            <option value='Reciclado'>Reciclado</option>
            <option value='all'>Todos</option>
        </select></th>
    </tr>
    <tr class="content">
        <td>SP0125BL</td>
        <td>Piso plástico relleno</td>
        <td>1000x400x50</td>
        <td>500</td>
        <td>Blanco</td>
        <td>Virgen</td>
    </tr>
    <tr class="content">
        <td>SP0125NE</td>
        <td>Piso plástico relleno</td>
        <td>1000x400x50</td>
        <td>500</td>
        <td>Negro</td>
        <td>Reciclado</td>
    </tr>
</table>
...