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

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

All the Free jQuery Plugins about ‘table filter’ are listed here.

0.4kb Fast Table Filter Plugin — jQuery filter-table.js

A super tiny (0.4kb minified) jQuery table filter plugin to quickly search table rows & filter tabular data based on user input.

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.

Minimal & Fast Table Filter Plugin — jQuery TableFilter

A really simple and blazing fast jQuery table filter plugin to filter rows of an HTML table with a regular search or text field.

Filter Through Large Tables With Form Controls — Filtable

A small, cross-browser, high-performance table filter plugin that allows the visitor to quickly filter through your large tabular data with several form controls.

Search/Filter Table Rows Based On Input — table_search.js

table_search.js is an ultra small ( DemoDownload

In-page DOM Filtering With jQuery — QjSearch

QjSearch is a very small jQuery in-page filtering plugin that enables a search field to hide non-matching items inside a given container as the user types.

jQuery Plugin To Toggle HTML Table Columns — columnFilter

columnFilter is a super tiny jQuery plugin for automatically generating checkbox based filter controls to toggle the visibility of your html table columns.

Basic Table Live Search Plugin For jQuery — liveSearch.js

liveSearch.js is a minimal jQuery table filter plugin which allows to filter rows of an html table based on user input.

Excel-like Bootstrap Table Sorting And Filtering Plugin

excel-bootstrap-table-filter.js is a jQuery plugin that creates multiple filters in your Bootstrap table columns to narrow down or re-sort the tabular data just like in the MS Excel.

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 Rows Of An Html Table — Table Filtering

A lightweight jQuery client-side table filtering plugin that allows to show/hide table rows depending on the value of input field you typed.

Powerful jQuery Data Table Column Filter Plugin — yadcf

yadcf is yet another data table column filter plugin for jQuery that integrates with jQuery DataTables Plugin to make your data tables sortable, filterable and searchable.

Читайте также:  Как подключается домашний телефон

Live Search Through Table Rows Using jQuery And Regex

A minimal jQuery live search solution that enables a specific input filed to search through table rows as you type.

Easy Data Table Manipulation Plugin With jQuery — easyTable

easyTable is a simple and Bootstrap-compatible jQuery table manipulation plugin which allows you to filter, sort and multi-select table rows.

Minimal jQuery In-page Filter Plugin — easySearch

easySearch is a jQuery filter plugin which allows the user to filter/search through child elements of a specific dataset (html list or table) based on text input values.

Simplest jQuery Table Row Filter Plugin — LiveSearch

LiveSearch is a dead simple jQuery script used to filter/search quickly through table rows through a text input field.

Cutomizable Real-time Table Filter Plugin With jQuery — tableFilterable

tableFilterable is a simple, fast, customizable jQuery table filtering plugin which allows to apply multiple live filter rules to an Html table.

jQuery Plugin For Easy Table Filtering and Sorting — Tablefilter

A lightweight and efficient jQuery plugin which adds fast, client-side filtering and sorting capabilities to your html table with large data sets.

Tiny jQuery Plugin For Clint-side Table Filtering — filterForTable

filterForTable is a lightweight jQuery plugin to provide basic filtering & live searching functionality for html table.

Simple jQuery Dropdown Table Filter Plugin — ddtf.js

ddtf.js is a really simple jQuery table filtering plugin which allows the visitor to filter table columns using dropdown lists.

jQuery Plugin For Multi-column Table Sorting and Filtering — Dynamitable

Dynamitable is a small yet useful jQuery table manipulation plugin that allows you to add sorting and filtering functionalities to an existing table.

Simple jQuery Plugin For Html Table Live Search

A minimalist jQuery plugin to generate a text input for your Html table so that you can filter the rows of the table with live search.

Simple jQuery Table Filter Plugin with Keyword Highlight — Table Searching

Table Searching is a simple jQuery table filter plugin which generates a text field to dynamically filter rows of an Html table with search term highlight.

Читайте также:  В каких случаях точка выколотая

jQuery Plugin For On Screen Table Filter — Filter On The Table

Filter On The Table is a jQuery table filter plugin that adds a input type="text" element to th selected. It searches for inner html of a element with .sort-value and compare with inputed value.

jQuery Plugin To Filter Html Table with Multiple Criteria — multifilter

multifilter is a dead simple yet useful jQuery plugin that allows to filter your table columns using multiple filter inputs.

Table Rows Filter Plugin — uiTableFilter

uiTableFilter is a simple jQuery plugin for filting table rows.

Работа с таблицами в WEB-интерфейсе может быть намного удобнее работы в том же Excel`е. Можно организовать пользовательские элементы самостоятельно, но зачем? Одна строка JS кода и подключенный плагин — готово.

Плагин jQuery Table — это профессиональный инструмент для работы с HTML-таблицами. Он обладает огромным функционалом, который включает в себя:

  • Сортировку по любому столбцу;
  • Быстрый поиск по таблице;
  • Пагинацию;
  • Лимит на отображение кол-ва элементов;
  • Адаптивный дизайн таблицы.

Особенно хочется отметить, адаптивный дизайн таблицы HTML — это извечная проблема для верстальщика. Спору нет, загонять контент в ячейки и позиционировать их без «ползания», весьма удобно. Однако, когда речь идет о просмотре таблицы на мобильном устройстве, то здесь начинаются проблемы. Порой, неразрешимые.

Итак, пришло время ознакомиться с тем, как нам преобразовать таблицу. Готовый результат можно посмотреть здесь. Скачиваем архив из источника, либо подключаем файлы CSS и JS через ресурс CDN:

Введение

На мой взгляд, jqGrid — самый успешный и удобный на данный момент плагин для jQuery, работающий с таблицами БД через AJAX запросы и PHP (Так же существует версия для ASP.NET).

Все подробности в данной статье я опущу, акцентируя ваше внимание лишь на вопросе, как сделать сложный поиск по таблице, используя этот плагин.

Для начала советую познакомиться:

  • с самим плагином вот тут;
  • с примерами его работы вот здесь;
  • со статьей «Введение в jqGrid», в которой описано как связать jqGrid + php + Mysql (или иные БД).

Как получить данные БЕЗ условия «where» в этой статье описываться не будет. Предполагается, что вы прочли статью «Введение в jqGrid» и хотите теперь не просто сортировать результаты и разбивать их на страницы, а делать сложные поиски сразу по нескольким полям таблицы.

Читайте также:  Как в новом скайпе увеличить размер шрифта

Прошу обратить особое внимание на пример, расположенный по ссылке выше, под названием «Searching (4.0) new» -> «Show query in search ».

И так, мы создали документ HTML:

Подключили JavaScript код:

Подключили необходимые стили и скрипты (скачать можно тут):

Обратите внимание, что я не подключаю библиотеку одним файлом или отдельными частями, как это можно было сделать, а использую файл «grid.loader.js», который также поставляется с исходниками на оффициальном сайте плагина. Я его немного изменил и привожу измененный отрывок кода:

Используя этот файл удобно управлять компонентами этого модуля, а также выбирать его язык.

Расширенный поиск

Форма расширенного поиска:

Теперь самое сладкое. Что же нам передает jqGrid при поиске?
POST или GET параметры (в зависимости от настроек jqGrid):

  1. $_REQUEST[‘_search‘] — Булево значение, если запрос с условием поиска оно принимает истинное значение;
  2. $_REQUEST[‘filters‘] — Объект с условиями в представлении json;
  3. $_REQUEST[‘searchField‘] — Имя поля для поиска (если условие простое);
  4. $_REQUEST[‘searchOper‘] — Операция сравнения поля для поиска (если условие простое);
  5. $_REQUEST[‘searchString‘] — Значение поля для поиска (если условие простое);

Теперь зная эти данные, необходимо сгенерировать строку условий «where» и передать ее необходимой процедуре, которая раннее принимала только имя сортируемой колонки, направление сортировки, номер страницы и количество записей на одну страницу (для пагинации).

Вот код, который необходимо вставить перед запросом в БД (в примере используется POST-запрос):

Вот «сердце» данной статьи, функции генерации условия для поиска в БД.

Рекурсивная функция generateSearchStringFromObj() генерации условий для выборки из БД:

Форма inline-поиска:

ВНИМАНИЕ: данная формула не будет работать при inline-поиске. При inline-поиске jqGrid будет передавать в параметрах запроса имена колонок и их значения.

Таким образом для реализации inline-поиска по `id` достаточно написать такой код:

Для поиска по нескольким полям к условию соответственно будут добавляться дополнительные строки, соединенные между собой «AND». Естественно вместо равенства можно использовать любой условие, позволительное для вашей БД.

Исходник файла-обработчика запросов AJAX от jqGrid. (Внимательно читайте комментарии, скрипт будет работать, только если вы настроете подключение к БД и впишите вместо моего обращение к модулю свой запроса к БД).

Ссылка на основную публикацию
Стрим с камеры телефона
На сегодняшний день сервис YouTube прочно закрепился на позициях лидера мирового интернет медиарынка. Всего несколько лет назад вести свой канал...
Смартфоны с флагманской камерой
Мощный, стильный флагманский смартфон — это не только полезный девайс, но и часть имиджа. Конечно, стоит флагман гораздо дороже, чем...
Смартфоны хонор в днс
Нет в наличии Нет в наличии Нет в наличии Нет в наличии Нет в наличии Нет в наличии Нет в...
Строки в pascal abc
Для обработки строковой информации в Турбо Паскаль введен строковый тип данных. Строкой в Паскале называется последовательность из определенного количества символов....
Adblock detector