jquery处理分页的问题

Question

我有一个 mysql 数据库，我正在使用 jquery 进行实时搜索，这就像一个魅力。但是我已经尝试了很多方法来为我的搜索结果设置分页。

下面是我的jquery代码

$(document).ready(function(){
    /*
     Set the inner html of the table, tell the user to enter a search term to get started.
     We could place this anywhere in the document. I chose to place it
     in the table.
    */
    $.get('data/search-data.php', function(returnData) {
        $('#results').html(returnData);
    });

    /* When the user enters a value such as "j" in the search box
     * we want to run the .get() function. */
    $('#searchData').keyup(function() {

        /* Get the value of the search input each time the keyup() method fires so we
         * can pass the value to our .get() method to retrieve the data from the database */
        var searchVal = $(this).val();

        /* If the searchVal var is NOT empty then check the database for possible results
         * else display message to user */
        if(searchVal !== '') {

            /* Fire the .get() method for and pass the searchVal data to the
             * search-data.php file for retrieval */
            $.get('data/search-data.php?searchData='+searchVal, function(returnData) {

                /* If the returnData is empty then display message to user
                 * else our returned data results in the table.  */
                if (!returnData) {
                    $('#results').html('<p style="padding:5px;">Search term entered does not return any data.</p>');
                } else {
                    $('#results').html(returnData);
                }
            });
        } else {
            $.get('data/search-data.php?searchData='+searchVal, function(returnData) {
                 $('#results').html(returnData);
            });
        }

    });

});

Answer 1

一个简单的解决方案，无需深入研究 javascript 对象和/或模板，从服务器返回页面，如下所示：

<div data-page="1" class="results">
    <ul>
        <li>Result 1</li>
        <li>Result 2</li>
    </ul>
</div>
<div data-page="2" class="hidden results">
    <ul>
        <li>Result 3</li>
        <li>Result 4</li>
    </ul>
</div>
<div data-page="3" class="hidden results">
    <ul>
        <li>Result 4</li>
        <li>Result 5</li>
    </ul>
</div>
<div id="pager"></div>

然后在 ajax 回调上使用 jquery 创建寻呼机链接：

var links = [];
$('.results').each(function(i) {
    var link = $('<a />', {
        text: i+1,
        href: '#'
    });
    links.push(link);
});
$('#pager').html(links);

然后点击处理程序将切换页面的显示：

$('#pager').on('click', 'a', function() {
   var i = $(this).index(); 
    $('.results').eq(i).removeClass('hidden').siblings('.results').addClass('hidden');
    return false;
});

演示：http://jsfiddle.net/Ry7NJ/1/