CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Gregory
Gregory

Reputation: 79

Client Side Pagination of AJAX result (jQuery)

Ok first of all, my problem is generally about pagination in AJAX, I need to split the htmls returned by Ajax, i dont want my search result page is appended by thousands list of returned html, so I need to split it into pieces.

I got this following Ajax code:

$.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)
    }
});

And it returns some html into my #flightlisting as:

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

My question is how can I get only the first 3 ID (flight1, flight2, flight3), and when I click some trigger it will continue to return the rest 2 ID (flight4 and flight5).

I know I should modify the getflightlist.php to return pieces by pieces, but in this case I can't. Please help, any link or suggest a better approach will be appreciated.

Upvotes: 2

Views: 2879

Answers (1)

John C
John C

Reputation: 3112

Rather than appending the data immediately after completing the ajax call you could add it to a variable and use jQuery to import the appropriate articles into the container when the user clicks a button.

So alter your ajax call and add a seperate function to add the articles -

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);
    }
});

Then have your button call the nextPage() function. Of course you will need to disable your button when you get to the end of the list.

See fiddle here.

Upvotes: 2

Related Questions