Дані: рядки фільтрування, засновані на значенні в стовпці

Мені потрібно відфільтрувати рядки з інформаційного каталогу, які не містять певного значення в стовпці. Наприклад, з наведеними нижче даними, я хотів би просто показати результати, де type = "Dog":

<table id="petowners">
<tr>
    <th>Type</th>
    <th>Breed</th>
    <th>Owner</th>
</tr>
<tr>
    <td>Dog</td>
    <td>Doberman</td>
    <td>Peter</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Jaguar</td>
    <td>Paul</td>
</tr>
<tr>
    <td>Dog</td>
    <td>Poodle</td>
    <td>Mary</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Lion</td>
    <td>Ringo</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Tiger</td>
    <td>John</td>
</tr>
</table>

Ось скрипт, який я використовую для налаштування сортування та результатів на сторінку. Очевидно, що фільтрування на основі стовпців - це пропущений біт, яким потрібна допомога.

$(document).ready(function() {
    $('#petowners').dataTable( {
        "order": [[ 0, "asc" ]],
        "iDisplayLength": -1,
        "oLanguage": 
            {
                "sLengthMenu": 'Display  records'
            },
    } );
} );

Мені потрібно додати дві посилання, кнопки або прапорці, одне для «собаки», а інше для «кота».

Коли користувач натискає "Dog", відображаються лише рядки, що містять "Dog" у стовпчику "Type". Точно так само, коли натискається "Cat", на екрані відображається лише рядки, що містять "Cat" у стовпчику "Type".

Схоже, це досить проста функція, але я не змогла знайти щось на сайті datatables.net, який показує, як це можна зробити.

Я сподіваюсь, що це має сенс, і хтось може допомогти.

Велике спасибі заздалегідь СКАЧАТИ СЕЙН

0

8 Відповіді

За допомогою поточної версії DataTables ви можете зробити це за допомогою функції "пошук".

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

Якщо ви хочете скасувати фільтр, просто переведіть порожній рядок замість регулярного виразу.

data_table.columns(column_index).search('', true, false).draw();

Сподіваюся, це допоможе.

5
додано
Очистіть рішення для мене і правильно оновлює таблицю/статистику/статус
додано Автор Mayhem, джерело
Це має бути прийнята відповідь.
додано Автор jlesse, джерело

За допомогою поточної версії DataTables ви можете зробити це за допомогою функції "пошук".

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

Якщо ви хочете скасувати фільтр, просто переведіть порожній рядок замість регулярного виразу.

data_table.columns(column_index).search('', true, false).draw();

Сподіваюся, це допоможе.

5
додано
Очистіть рішення для мене і правильно оновлює таблицю/статистику/статус
додано Автор Mayhem, джерело
Це має бути прийнята відповідь.
додано Автор jlesse, джерело

За допомогою поточної версії DataTables ви можете зробити це за допомогою функції "пошук".

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

Якщо ви хочете скасувати фільтр, просто переведіть порожній рядок замість регулярного виразу.

data_table.columns(column_index).search('', true, false).draw();

Сподіваюся, це допоможе.

5
додано
Очистіть рішення для мене і правильно оновлює таблицю/статистику/статус
додано Автор Mayhem, джерело
Це має бути прийнята відповідь.
додано Автор jlesse, джерело

Html:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

Javascript:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
додано
Відмінно працює, дякую.
додано Автор Wonko the Sane, джерело
Я спробував подібне рішення для цього, але він не працював належним чином. Я думаю, що це, ймовірно, працює тільки тоді, коли таблиця даних не оновлена.
додано Автор jlesse, джерело

Html:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

Javascript:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
додано
Відмінно працює, дякую.
додано Автор Wonko the Sane, джерело
Я спробував подібне рішення для цього, але він не працював належним чином. Я думаю, що це, ймовірно, працює тільки тоді, коли таблиця даних не оновлена.
додано Автор jlesse, джерело

Html:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

Javascript:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
додано
Відмінно працює, дякую.
додано Автор Wonko the Sane, джерело
Я спробував подібне рішення для цього, але він не працював належним чином. Я думаю, що це, ймовірно, працює тільки тоді, коли таблиця даних не оновлена.
додано Автор jlesse, джерело

Спробуйте це:

$ ('# petowners tr') кожен (function() {     var tdVal = $ (this) .find ("td: first") text ();     якщо (tdVal == "Собака") продовжують;     else $ (this) .shide (); });

Це до вас, що ви хочете видалити() його або сховати (). Також подібним чином ви можете зробити для "Cat"

0
додано

Спробуйте це:

$ ('# petowners tr') кожен (function() {     var tdVal = $ (this) .find ("td: first") text ();     якщо (tdVal == "Собака") продовжують;     else $ (this) .shide (); });

Це до вас, що ви хочете видалити() його або сховати (). Також подібним чином ви можете зробити для "Cat"

0
додано