0
WELCOM每一個機構,並感謝所有服務搜索查詢得到的無刷新(pagenation)搜索結果
我使用search query & get Search result without refresh
的代碼,它工作正常, 我的問題是如何使pagnation,因爲一段時間結果很長。
我需要givin
感謝在同一個例子答案。
WELCOM每一個機構,並感謝所有服務搜索查詢得到的無刷新(pagenation)搜索結果
我使用search query & get Search result without refresh
的代碼,它工作正常, 我的問題是如何使pagnation,因爲一段時間結果很長。
我需要givin
感謝在同一個例子答案。
這有點複雜,因爲你想知道你在哪個頁面,還有多少頁面。
我將從服務器端腳本開始,它將返回結果。在這個例子中,客戶端將發送以下參數:
$_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>
或者,您可以添加「長度」參數,來控制頁面的長度。
注意這個腳本只是爲了演示的目的,至少存在以下有待提高:
你可以在這裏查看該腳本的例子:Search example