Главная » Языки программирования

Таблица с фильтрами html

На чтение 8 мин
Содержание
  1. Examples
  2. TABLE 1
  3. TABLE 2
  4. TABLE 3
  5. TABLE 4
  6. TABLE 5
  7. TABLE 6
  8. TABLE 7
  9. TABLE 8
  10. TABLE 9
  11. TABLE 10
  12. TABLE 11
  13. TABLE 12
  14. Как сделать — Фильтра/поиска таблицы
  15. Фильтр таблицы
  16. Создание отфильтрованную таблицу
  17. Пример
  18. Пример
  19. Пример
  20. Простая фильтрация таблицы на Jquery
  21. Демонстрация
  22. Создание таблицы с фильтрацией

Examples

HTML Table Filter Generator is no longer maintained, it is now replaced by the TableFilter project. Don’t hesitate to check the demos out in their new location along with exhaustive documentation in the project’s WIKI.

In this page you will find a collection of examples showing how to configure the HTML Table Filter Generator script.

  • Table 1: add the filter grid
  • Table 2: add a drop-down filter, define its first option, sort it and remove a filter
  • Table 3: set the starting row for the filtering process and make a row always visible
  • Table 4: disable ‘enter’ key and «onchange» event of drop-down filters, add a «Filter» button
  • Table 5: enable exact query matches, set alternating rows background color, set column widths, add rows counter and reset button
  • Table 6: set pagination, enable loader, set rows counter and reset button
  • Table 7: set the last row always visible and perform a sum operation on 2 columns
  • Table 8: perform actions and retrieve information from the grid by using public functions
  • Table 9: set pagination buttons HTML, number of results per page and loader HTML
  • Table 10: set numeric ascending/descending order for drop-down menu filters and enable refreshing filters behavior
  • Table 11: position filters under headers, make filters case sensitive, remember filters’ values across page re-loads
  • Table 12: enable the single filter feature, the search as you type behavior, row selection and highlight searched keyword

Here you have a regular HTML table:

WORLD INTERNET USAGE AND POPULATION STATISTICS

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %

Below some examples of how to apply the filter grid to the same table:

TABLE 1

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %
Читайте также:  Ссылки на странице

TABLE 2

Add a drop-down filter, define its first option, sort it and remove a filter

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %

TABLE 3

Set the starting row for the filtering process and make a row always visible

Additional row
World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Additional row
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
This row is always visible
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %
Last row is always visible

TABLE 4

Disable ‘enter’ key and «onchange» event of drop-down filters, add a «Filter» button

World Regions Population ( 2007 Est.) Population % of World Usage % of World
Africa 933,448,292 14.2 % 3.0 %
Asia 3,712,527,624 56.5 % 35.6 %
Europe 809,624,686 12.3 % 28.6 %
Middle East 193,452,727 2.9 % 1.8 %
North America 334,538,018 5.1 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 1.7 %

TABLE 5

Enable exact query matches, set alternating rows background color, set column widths, add rows counter and reset button

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %

TABLE 6

Set pagination, enable loader, set rows counter and reset button

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %

TABLE 7

Set the last row always visible and perform a sum operation on 2 columns

Читайте также:  Java file mkdirs mkdir
World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %
Total:

TABLE 8

Perform actions and retrieve information from the grid by using public methods

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %

TABLE 9

Set pagination buttons HTML, number of results per page and loader HTML

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %

TABLE 10

Set numeric ascending/descending order for drop-down menu filters and enable refreshing filters behavior

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933 448 292 14.2 3.5 3.0 %
Asia 3 712 527 624 56.5 10.5 35.6 %
Europe 809 624 686 12.3 38.6 28.6 %
Middle East 193 452 727 2.9 10.0 1.8 %
North America 334 538 018 5.1 69.4 21.2 %
Latin America / Caribbean 556 606 627 8.5 16.0 8.1 %
Oceania / Australia 34 468 443 0.5 53.5 1.7 %

TABLE 11

Position filters under headers, make filters case sensitive, remember filters’ values across page re-loads

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933 448 292 14.2 3.5 3.0 %
Asia 3 712 527 624 56.5 10.5 35.6 %
Europe 809 624 686 12.3 38.6 28.6 %
Middle East 193 452 727 2.9 10.0 1.8 %
North America 334 538 018 5.1 69.4 21.2 %
Latin America / Caribbean 556 606 627 8.5 16.0 8.1 %
Oceania / Australia 34 468 443 0.5 53.5 1.7 %

TABLE 12

Enable the single filter feature, the search as you type behavior, row selection and highlight searched keyword

Читайте также:  Insert html code into html
World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933 448 292 14.2 3.5 3.0 %
Asia 3 712 527 624 56.5 10.5 35.6 %
Europe 809 624 686 12.3 38.6 28.6 %
Middle East 193 452 727 2.9 10.0 1.8 %
North America 334 538 018 5.1 69.4 21.2 %
Latin America / Caribbean 556 606 627 8.5 16.0 8.1 %
Oceania / Australia 34 468 443 0.5 53.5 1.7 %

Источник

Как сделать — Фильтра/поиска таблицы

Узнать, как создать фильтр таблицы с помощью JavaScript.

Фильтр таблицы

Как использовать JavaScript для поиска определенных данных в таблице.

Имя Страна
Alfreds Futterkiste Германия
Berglunds snabbkop Швеция
Island Trading Великобритания
Koniglich Essen Германия
Laughing Bacchus Winecellars Канада
Magazzini Alimentari Riuniti Италия
North/South Великобритания
Paris specialites Франция

Создание отфильтрованную таблицу

Шаг 1) Добавить HTML:

Пример

Имя Страна
Alfreds Futterkiste Германия
Berglunds snabbkop Швеция
Island Trading Великобритания
Koniglich Essen Германия

Шаг 2) Добавить CSS:

Стиль входного элемента и таблицы:

Пример

#myInput <
background-image: url(‘/css/searchicon.png’); /* Добавить значок поиска для ввода */
background-position: 10px 12px; /* Расположите значок поиска */
background-repeat: no-repeat; /* Не повторяйте изображение значка */
width: 100%; /* Полная ширина */
font-size: 16px; /* Увеличить размер шрифта */
padding: 12px 20px 12px 40px; /* Добавить немного отступов */
border: 1px solid #ddd; /* Добавить серую границу */
margin-bottom: 12px; /* Добавить некоторое пространство под входом */
>

#myTable border-collapse: collapse; /* Свернуть границы */
width: 100%; /* Полная ширина */
border: 1px solid #ddd; /* Добавить серую границу */
font-size: 18px; /* Увеличить размер шрифта */
>

#myTable th, #myTable td text-align: left; /* Выравнивание текста по левому краю */
padding: 12px; /* Добавить отступ */
>

#myTable tr /* Добавить нижнюю границу для всех строк таблицы */
border-bottom: 1px solid #ddd;
>

#myTable tr.header, #myTable tr:hover /* Добавить серый цвет фона для заголовка таблицы и при наведении курсора мыши */
background-color: #f1f1f1;
>

Шаг 3) Добавить JavaScript:

Пример

// Перебирайте все строки таблицы и скрывайте тех, кто не соответствует поисковому запросу
for (i = 0; i < tr.length; i++) td = tr[i].getElementsByTagName("td")[0];
if (td) txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) tr[i].style.display = «»;
> else tr[i].style.display = «none»;
>
>
>
>

Совет: Удалить toUpperCase() если вы хотите выполнить поиск с учетом регистра.

Совет: Изменить tr[i].getElementsByTagName(‘td’)[0] к [1] если вы хотите найти «Страна» (индекс 1) вместо «имя» (индекс 0).

Совет:Кроме того, проверить Фильтр списка.

Источник

Простая фильтрация таблицы на Jquery

Простая фильтрация таблицы на Jquery

Рассмотрим как создать простую таблицу с возможностью фильтрации данных. Для удобства и простоты будем использовать Jquery.

Пример работы ниже. Вы можете начинать вводить данные и вам будут подставляться нужные результаты. Можно фильтровать сразу через все поля.

Демонстрация

Имя Фамилия Отчество
Иван Петров Викторович
Василий Иванов Александрович
Иван Иванов Викторович
Петр Петров Александрович
Александр Петров Викторович

Создание таблицы с фильтрацией

Реализация очень простая. Вам нужно лишь вставить разметку, подключить jquery и скрипт.

 #filter-table < width: 100%; >#filter-table th < background-color: #dadada; >#filter-table td, #filter-table th 
 
Имя Фамилия Отчество 
 
       
 
Иван Петров Викторович 
 
Василий Иванов Александрович 
 
Иван Иванов Викторович 
 
Петр Петров Александрович 
 
Александр Петров Викторович

Думаю тут все просто, для лучшего вида, добавил немного CSS.

Подключили библиотеку jquery и сам скрипт. Не забудьте, что js-скрипты должны идти после html-разметки. Если есть вопросы, пишите в комментарии

Источник

Оцените статью
© 2023 Программирование