search query & get Search result without refresh (pagenation)
welcom every body and thanks for all services
I have use the code for search query & get Search result without refresh
and it works fine , my question how to make pagnation, because some time the result is very long.
i need the answer in same example givin
thanks开发者_如何学C.
This is a little more complex, since you want to know at which page you are and how many more there are.
I'll start with the server side script, which returns the result. In this example, the client will send the following parameters:
$_POST['value'] = The search input
$_POST['page'] = What page to get
$_POST['length'] = How many items per page
Here's an example of how the script could look like:
<?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);
?>
Save it as search.php. Here's the 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>
Optionally, you can add the 'length' parameter, to control the page length.
Note that this script is just for demonstrating purposes, at least the following should be improved:
- Filter input values to prevent sql injection
- Only show the 'Previous' and 'Next' buttons when there is a previous or next page, respectively.
You can view an example of this script here: Search example
加载中,请稍侯......
精彩评论