Question

欢迎每个人，并感谢所有服务

我使用了search query & get Search result without refresh

的代码

它工作正常，我的问题如何制作pagnation，因为有些时候结果很长。

我需要同一个例子givin

中的答案

感谢。

Answer 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>

或者，您可以添加'length'参数，以控制页面长度。

请注意，此脚本仅用于演示目的，至少应改进以下内容：

过滤输入值以防止sql 注射
仅显示“上一个”和“下一个” 有前一个或按钮时的按钮下一页，分别。

您可以在此处查看此脚本的示例：Search example

搜索查询＆amp;获取搜索结果而不刷新（分页）

1 个答案: