1. 首页
  2. 问答
  3. 搜索查询得到的无刷新（pagenation）搜索结果

搜索查询得到的无刷新（pagenation）搜索结果

2010-11-15 137 views

回答

1

这有点复杂，因为你想知道你在哪个页面，还有多少页面。

我将从服务器端脚本开始，它将返回结果。在这个例子中，客户端将发送以下参数：

$_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>

或者，您可以添加“长度”参数，来控制页面的长度。

注意这个脚本只是为了演示的目的，至少存在以下有待提高：

  • 滤波器输入值，以防止SQL 注射
  • 只显示“上一页”和“下一页” 当有前一个或下一个页面时，按钮。

你可以在这里查看该脚本的例子：Search example

来源

2010-11-15 09:24:14

相关问题

 相关问题