php - 如何对ajax加载的数据进行分页？

Question

我使用 JQuery post 从表单加载数据。

$("#SortItmesForm").submit(function() {
    $.post("filtItems.php",
        $("#FiltItemsForm").serialize(),
        function(data) {
            /*alert(data);*/
            $('#results').html(data);
        }
    );
    return false; //Code after form submitted
});

FiltItems.php 输出到

<div id="results"></div>

如下。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

任何人都可以给我一些指导，如何对加载的结果进行分页。最好使用 JQuery。

我尝试了很多 JQuery 插件，但它们似乎都不能处理 ajax 加载的数据。

Answer 1

当然，在这种情况下，你的 CSS 也很重要。假设您希望每个 li 显示为一个页面。

<ul id="list_container">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<a href="javascript:paginate.move('left');">&lt;</a> | <a href="javascript:paginate.move('right');">&gt;</a>

CSS:

#results{
    width:200px;
    height:200px;
    overflow:hidden;
}

#list_container{
    width:600px;
    margin-left:0px;
}

#list_container li{
    width:200px;
    float:left;
}

js:

var paginate = {
    cur_offset: 0,
    move: function move(dir)
    {
        if(dir == 'left')
        {
            paginate.cur_offset -= 200;
            $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000);
        }
        else
        {
            paginate.cur_offset += 200;
            $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000);
        }
    }
};

显然，您需要做出规定，因此如果您在第 1 页，则禁用向左箭头，最后一页则禁用向右箭头，但这些很容易处理。

我也有可能误解了你的问题。如果您在让浏览器呈现 ajax 调用结果时遇到问题，那么您可能需要像这样设置 dom 元素:

var elem = $('<div>');
elem.attr('id', some_id);
elem.html(data.html); // assuming you pass json, if not then just data
$('#results').append(elem);

此外，如果某些函数无法与您新创建的 dom 元素配合使用，请查看 jquery .live。

至于插件 - 这是相当模糊的。我不知道 jquery 有一个“分页”插件，因为分页是一件非常简单的事情。我从未发现需要搜索基本插件。

如果这个答案有点用，但需要更多信息，请告诉我，如果可能，我会更新。