Это немного сложнее, поскольку вы хотите знать, на какой странице вы находитесь и сколько их еще.
Я начну со сценария на стороне сервера, который возвращает результат. В этом примере клиент отправит следующие параметры:
$_POST['value'] = The search input
$_POST['page'] = What page to get
$_POST['length'] = How many items per page
Вот пример того, как скрипт может выглядеть:
<?php
define("HOST", "localhost");
// Database user
define("DBUSER", "username");
// Database password
define("PASS", "password");
// Database name
define("DB", "database_name");
############## Make the mysql connection ###########
$conn = mysql_connect(HOST, DBUSER, PASS) or die('Could not connect !<br />Please contact the site\'s administrator.');
$db = mysql_select_db(DB) or die('Could not connect to database !<br />Please contact the site\'s administrator.');
$value = $_GET['value'];
$page = $_GET['page'] - 1;
$length = $_GET['length'];
if(!$page || $page < 0) $page = 0;
if(!$length || $length < 0) $length = 10;
$start = $page * $length;
$query = mysql_query("SELECT * FROM persons WHERE age LIKE '%".$value."%' LIMIT ".$start.", ".$length.";") or die('error ' . mysql_error());
$items = array();
while($data = mysql_fetch_array($query)) {
$items[] = $data;
}
$result = array(
'items' => $items,
'page' => $page,
'length' => count($items)
);
echo json_encode($result);
?>
Сохраните его как search.php.
Вот HTML:
<html>
<head>
<title>Search</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
page = 1;
$('#search').click(function() {
search();
});
$('#prev').click(function() {
if(page > 1) page--;
search();
});
$('#next').click(function() {
page++;
search();
});
function search() {
$.getJSON('search.php', {
value: $('#value').val(),
page: page
}, function(data) {
var result = '';
$.each(data['items'], function(i, item) {
result += '<tr><td>' + item['name'] + '</td></tr>';
});
$('#results').html('<table>' + result + '</table>' + data['length'] + ' results');
});
return false;
}
});
</script>
</head>
<body>
<form id="lets_search" method="post">
<input type="text" id="value" />
<input type="button" id="search" value="Search" />
</form>
<div id="results"></div>
<a id="prev" href="#">Previous</a>
<a id="next" href="#">Next</a>
</body>
</html>
При желании вы можете добавить параметр 'length' для управления длиной страницы.
Обратите внимание, что этот скрипт только для демонстрационных целей, по крайней мере, следующее должно быть улучшено:
- Фильтр входных значений для предотвращения sql
инъекции
- Показывать только «Предыдущий» и «Следующий»
кнопки, когда есть предыдущий или
на следующей странице соответственно.
Пример этого скрипта можно посмотреть здесь: Пример поиска