вСкрипты

Динамически поисковый фильтр на базе JQUERY и PHP

Динамически поисковый фильтр на базе JQUERY и PHP

 

В прошлом, запрос данных для фильтрации был немного громоздким. Сегодня получение данных стало намного проще благодаря  AJAX и JQuery. Перед фильтрацией данных, участвует GET запрос для того, чтобы обновить страницу. Теперь мы можем в полной мере воспользоваться помощью AJAX, чтобы получить наши данные и заполнить нашу таблицу данных на основе пользовательского ввода без обновления страницы.

В этом уроке, я покажу вам, как это делается с помощью AJAX .get () метод запроса, построенном в библиотеку JQuery. Мы будем использовать PHP код для извлечения данных из базы данных и отобразим результаты данных в таблице.

Вважно иметь в виду, что это только один из способов обработки этой операции. Метод Jquery в .get () будет использован только для получения данных, а не создавать данные. Вы хотите знать, какой метод вы используете для задачи, над которой вы работаете.Ссначала хочу загрузите исходные файлы и настройки базы данных. В исходных файлов я оставил файлик, который называется customers.sql

Настройка базы данных

Настройка базы данных на локальном компьютере или на удаленным. Затем вставьте filecustomers.sql таблицу, приведенной в исходном загрузочном пространстве.

Затем откройте файл /data/search-data.php и вводите информации о пользователе в соответствии с вашими требованиями по настройке баз данных (логин / пароль).

Внешний вид таблицы

Я использую ThemeRoller JQuery для стилизации таблицы. Тем не менее, вы можете использовать любой стиль, который подходит для вашего проекта. HTML-это довольно таки развит. Я поместил этот код в файл с именем index.php. Результаты, которые возвращаются из поискового запроса на основе следующих:

Независимо от того, в какой таблице мы используем, пока у нас есть необходимое количество столбцов полевых и ID=”searchData” мы не можем передавать данные в таблицу. Ах да, и вы также должны иметь поле ввода для поиска.

 

JQUERY

Я поставил комментарии в разметке JQuery, чтобы сделать его немного легче для вашего понимания. Этот код находится в файле / JS JQuery-search.js

 

PHP

Откройте файл  data / search-data.php. Я поставил заметки в этом файле, чтобы помочь вам лучше понять процесс. Этот файл содержит PHP код для извлечения данных из базы данных на основе ввода пользователей в окне поиска.

Ресурсы

 

Источник: http://www.codemashups.com/dynamic-search-filtering-using-jquery-and-php/

Пожалуйста, оцените материал

Внимание! Если Вы обнаружили ошибки или нерабочие ссылки в тексте, пожалуйста, сообщите мне.

Похожие посты

Автор:

Веб-разработчик. Работа с проектами простой и средней сложности. Верстка, программирование. Simpla, Drupal, Wordpress.

Оставить комментарий

Ваш e-mail не будет опубликован.