JavaScript Table Filter Search

10 Best Table Filtering Plugin In JavaScript (2023 Update)

When you’re building a large HTML table in the document, it is important to provide a Filter functionality if you are to get a good user experience.

What Is Table Filter?

In general, a table filter generates in your existing HTML table a search field where the users can quickly find out the desired tabular data based on the keyword they typed.

It is critical to the user experience because it is difficult for visitors to find the data they need quickly and accurately in a huge table.

The Best Table Filter Plugin

In this post, you will find a list of 10 best jQuery and Vanilla JavaScript table filter plugins that enable efficient & client-side filtering & live search functionalities on HTML tables. I hope you like it.

Originally Published Sep 28 2020, updated Mar 06 2023

Table of contents:

Best jQuery Table Filter Plugins

Customizable Table Filtering & Highlighting Plugin With jQuery — FilterTable

A highly customizable jQuery table filtering plugin which enables an input field to search through your tabular data while highlighting the filtered table cells.

jQuery Plugin To Filter Html Table with Multiple Criteria — multifilter

A dead simple yet useful jQuery plugin that allows to sort your table columns using multiple filter inputs.

Enable Sorting, Filtering And Pagination For Table — jQuery fancyTable

The fancyTable jQuery plugin adds blazing fast, client-side sorting, pagination, and live searching functionalities to your large data table.

Paginate, Filter, And Sort Dynamic Data In A Table — Table Sortable

The Table Sortable jQuery plugin helps you render a customizable dynamic data table from JSON or JavaScript objects, with paginate, live filter, and data sort capabilities.

jQuery Plugin For Sortable and Searchable Tables — Tablesort

Yet another jQuery table sort plugin that allows to make your html tables sortable and searchable.

Best vanilla JS Table Filter Plugins

Create Pagination And Filter For HTML Table – Ligne PaginateJs

A vanilla JavaScript plugin to create pagination and filter controls for large HTML tables. Without any frameworks and dependencies.

Minimal Table Filtering In JavaScript – TableFilter.js

A tiny (1kb minified) table filtering JavaScript library to filter/search through table columns via search fields.

Generate A Filterable Data Table From JSON – ModernTable

A modern table builder in JavaScript library which helps you render JSON data in a filterable data table.

Easy Table Pager & Filter In JavaScript – ECJSTable

An easy and fast JavaScript library for paginating and filtering tabular data in an HTML table.

Dynamic Sortable Filterable Data Table In Pure JavaScript – simpleTable

A vanilla JavaScript library to dynamically renders a sortable, filterable, scrollable, editable data table from JavaScript/JSON data.

More Resources:

Want more jQuery plugins or JavaScript libraries to create filterable HTML tables on the web & mobile? Check out the jQuery Table Filter and JavaScript Table Filter sections.

See Also:

Источник

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

Узнать, как создать фильтр таблицы с помощью 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).

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

Источник

How to Filter an HTML Table Using JavaScript (Search on the HTML Table)

Here is a solution to quickly filter an HTML table using JavaScript. Sometimes you have to show a large number of HTML table records and you have to quickly search the record by type in the search box. Today we share pure JavaScript code to filter table records easily.

JavaScript is a very powerful scripting language to execute on client-side. Through the JavaScript, we can find and filter record. Today session you will learn to create filter option for the HTML table using JavaScript. You can search by any of the columns just only single search box. Moreover, this JavaScript written code is effectively fewer lines and it will not affect any other functionality.

Quickly Search/Filter a HTML Table Using JavaScript

Here are one HTML Table element and one input text field for searching. Also, we used Bootstrap 4 to create a page layout. In the table element, we added some sample data. You can search by customer id, name, email, postal code, and country.

Here, we created one HTML file. Which is hold HTML, CSS, and JavaScript code. However, you can create separate files.

     h3 span < font-size: 22px; >h3 input.search-input < width: 300px; margin-left: auto; float: right >.mt32  
 
JavaScript Filter Table Data 
 
 
 
Customer ID
 
Name
 
Email
 
Postal Code
 
Country
 
 
 
 
1
 
Ana Trujillo
 
[email protected]
 
050214
 
Germany
 
 
2
 
Antonio Moreno
 
[email protected]
 
12209
 
Mexico
 
 
3
 
Maria Anders
 
[email protected]
 
05021
 
Germany
 
 
4
 
Thomas Hardy
 
[email protected]
 
WA1 1DP
 
United Kingdom
 
 
5
 
Christina Berglund
 
[email protected]
 
S-958 22
 
Sweden
 
 
6
 
Davolio Nancy
 
[email protected]
 
810025
 
India
 
 
7
 
Fuller Andrew
 
[email protected]
 
W23 458
 
United State
 
 
8
 
Leverling Janet
 
[email protected]
 
T5A 0B5
 
Canada
 
 
 
 
   

Following are demo and source code to filter an HTML table using JavaScript.

Are you struggling with assignment help in Javascript programming?

If so, you’re not alone. Javascript is an incredibly popular and versatile language, but it can also be tricky to learn. Fortunately, there are plenty of resources available to help you with your assignmens. One option is to use online tutorials and courses. These can often be found for free, and they provide a great foundation for learning Javascript. Tutorials will teach you the basics of assignment help in Javascript programming, as well as more advanced concepts. Another option is to ask for the help of an expert. Many professionals offer assignment help in Javascript programming at a reasonable cost. A qualified expert can provide personalized guidance and advice tailored to your individual needs. Finally, some assignment help can be provided by a community of other Javascript programmers. Sites such as Stack Overflow are full of helpful people willing to share their knowledge and experience with others. This is an invaluable resource for assignment help, as it allows you to tap into collective wisdom.

We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe our newsletter and get notified when we publish new WordPress articles for free. Moreover, you can explore here other interesting articles.

Источник