jquery - 有人可以分享一个非常简单的带有分页功能的 JQuery Ajax 版本吗？

Question

有人可以分享一个非常简单的带有分页功能的 JQuery Ajax 版本吗？

Answer 1

我建议使用服务器来处理分页，因为它应该根据收到的 pageNo 参数响应正确的输出:

$(document).ready(function() {
    $("a").click(function() {
        $("#results").load( "foo.php", { pageNo: $(this).text()}, sortBy: $("#sortBy").val() );
        return false;
    });
});

<select id="sortBy">
    <option value="date">Added</option>
    <option value="price">Price</option>
</select>

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

<a href="foo.php?p=1">1</a>
<a href="foo.php?p=2">2</a>

注意:当一个对象作为第二个参数传递给 $.load 时，将发出 POST 请求。请参阅http://api.jquery.com/load/

编辑:与上面相同，但从服务器获取 JSON:

$(document).ready(function() {
    $("a").click(function() {
        $.getJSON( "foo.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val() }, function(json) {
            // read json here, possibly using $.each
        });
        return false;
    });
});

编辑(再次):我建议使用服务器来渲染初始内容。如果你坚持用ajax请求第一页结果，一种方法是模拟点击第一页的链接:

$("a:first").click();

最好给你的分页链接一个类，比如.pageNo，以消除任何困惑:

$("a.pageNo:first").click();