Question

好吧首先，我的问题一般是关于AJAX中的分页，我需要拆分Ajax返回的htmls，我不希望我的搜索结果页面附加了数千个返回的html列表，所以我需要将它拆分成件。

我得到了以下Ajax代码：

$.ajax({
    url: "getflightlist.php?parameter=parameter",
    type: "GET",
    dataType: "html",
    success: function(data, textStatus, jqXHR)
    {
        tjq("#flightlisting").append(data)             
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert(textStatus)
    }
});

它将一些html返回到我的#flightlisting中：

<article id="flight1" class="list"></article>
<article id="flight2" class="list"></article>
<article id="flight3" class="list"></article>
<article id="flight4" class="list"></article>
<article id="floght5" class="list"></article>

我的问题是如何才能获得前3个ID（flight1，flight2，flight3），当我点击某个触发器时，它将继续返回其余2个ID（flight4和flight5）。

我知道我应该修改getflightlist.php来逐件返回，但在这种情况下我不能。请帮助，任何链接或建议更好的方法将不胜感激。

Answer 1

不是在完成ajax调用后立即附加数据，而是可以将其添加到变量中，并在用户单击按钮时使用jQuery将相应的文章导入容器中。

所以改变你的ajax调用并添加一个单独的函数来添加文章 -

var articles;

var pageNum = 0;

function nextPage() {
    $("#flightlisting").empty();
    var maxArticlesPerPage = 3;
    var firstArticle = maxArticlesPerPage * pageNum;
    var currentArticle = firstArticle;
    var $articles = $($(articles), "article");
    var i = 0;
    while(currentArticle < $articles.length && i < maxArticlesPerPage) {
        $("#flightlisting").append($articles.eq(currentArticle));
        i++;
        currentArticle++;
    }
        pageNum++;
}

$.ajax({
    url: "getflightlist.php?parameter=parameter",
    type: "GET",
    dataType: "html",
    success: function(data, textStatus, jqXHR)
    {
        articles = data;
        nextPage();
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert(textStatus);
    }
});

然后让您的按钮调用nextPage()功能。当然，当你到达列表末尾时，你需要禁用你的按钮。

请在此处查看fiddle。

客户端分页AJAX结果（jQuery）

1 个答案: