В прошлом, запрос данных для фильтрации был немного громоздким. Сегодня получение данных стало намного проще благодаря AJAX и JQuery. Перед фильтрацией данных, участвует GET запрос для того, чтобы обновить страницу. Теперь мы можем в полной мере воспользоваться помощью AJAX, чтобы получить наши данные и заполнить нашу таблицу данных на основе пользовательского ввода без обновления страницы.
В этом уроке, я покажу вам, как это делается с помощью AJAX .get () метод запроса, построенном в библиотеку JQuery. Мы будем использовать PHP код для извлечения данных из базы данных и отобразим результаты данных в таблице.
Вважно иметь в виду, что это только один из способов обработки этой операции. Метод Jquery в .get () будет использован только для получения данных, а не создавать данные. Вы хотите знать, какой метод вы используете для задачи, над которой вы работаете.Ссначала хочу загрузите исходные файлы и настройки базы данных. В исходных файлов я оставил файлик, который называется customers.sql
к содержанию ↑Настройка базы данных
Настройка базы данных на локальном компьютере или на удаленным. Затем вставьте filecustomers.sql таблицу, приведенной в исходном загрузочном пространстве.
Затем откройте файл /data/search-data.php и вводите информации о пользователе в соответствии с вашими требованиями по настройке баз данных (логин / пароль).
Внешний вид таблицы
Я использую ThemeRoller JQuery для стилизации таблицы. Тем не менее, вы можете использовать любой стиль, который подходит для вашего проекта. HTML-это довольно таки развит. Я поместил этот код в файл с именем index.php. Результаты, которые возвращаются из поискового запроса на основе следующих:
<tbody id=”results”></tbody>
Независимо от того, в какой таблице мы используем, пока у нас есть необходимое количество столбцов полевых и ID=»searchData» мы не можем передавать данные в таблицу. Ах да, и вы также должны иметь поле ввода для поиска.
Поиск: <input style="width:150px;" id="searchData" type="text">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Search Autocomplete</title>
<style type="text/css" title="currentStyle">
@import "css/grid_sytles.css";
@import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>
<!-- jQuery libs -->
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-search.js"></script>
</head>
<body>
<div id="container">
<div id="dataTable">
<div class="ui-grid ui-widget ui-widget-content ui-corner-all">
<div class="ui-grid-header ui-widget-header ui-corner-top clearfix">
<div class="header-left">
<!-- Left side of table header -->
</div>
<div class="header-right">
Search: <input style="width:150px;" id="searchData" type="text"></div>
</div>
<table class="ui-grid-content ui-widget-content cStoreDataTable" id="cStoreDataTable">
<thead>
<tr>
<th class="ui-state-default">Имя</th>
<th class="ui-state-default">Адрес</th>
<th class="ui-state-default">Телефон</th>
<th class="ui-state-default">Емеил</th>
</tr>
</thead>
<tbody id="results"></tbody>
</table>
<div class="ui-grid-footer ui-widget-header ui-corner-bottom">
<div class="grid-results">Результаты: </div>
</div>
</div>
</div>
</div>
</body>
</html>
к содержанию ↑
JQUERY
Я поставил комментарии в разметке JQuery, чтобы сделать его немного легче для вашего понимания. Этот код находится в файле / JS JQuery-search.js
$(document).ready(function(){
/*
Устанавливаем внутреннюю HTML таблицу, сообщаем пользователю ввести поисковый запрос, чтобы начать.
Мы могли бы разместить это где-нибудь в документе. Я выбрал, чтобы поместить его
в таблице.
*/
$('#results').html('<p style="padding:5px;">Enter a search term to start filtering.</p>');
/* Когда пользователь вводит значение, таких как "J" в поле поиска
* Мы запускаем функцию .get (). */
$('#searchData').keyup(function() {
/* Получаем значение входного поиска каждый раз, KeyUp () метод срабатывает таким образом, что
* Может передать значение методу нашего .get () для извлечения данных из базы данных*/
var searchVal = $(this).val();
/* Если searchVal вар не пуст, то проверяем базу данных для возможных результатов
* Еще показываем сообщение пользователю*/
if(searchVal !== '') {
/* Горячий .get () метод и передача данные в searchVal
* search-data.php файл для поиска */
$.get('data/search-data.php?searchData='+searchVal, function(returnData) {
/* Если returnData пуст, то выводим сообщение для пользователя
* Остальное наши возвращенные результаты данных в таблице. */
if (!returnData) {
$('#results').html('<p style="padding:5px;">Поиск не вернул никаких данных.</p>');
} else {
$('#results').html(returnData);
}
});
} else {
$('#results').html('<p style="padding:5px;">Введите поисковое слово, чтобы начать фильтрацию</p>');
}
});
});
к содержанию ↑
PHP
Откройте файл data / search-data.php. Я поставил заметки в этом файле, чтобы помочь вам лучше понять процесс. Этот файл содержит PHP код для извлечения данных из базы данных на основе ввода пользователей в окне поиска.
Ресурсы
- .get() method – jQuery
- .html() method – jQuery
- .val() method – jQuery
- .keyup() method – jQuery
- while() function – php
p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
