最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - What's the best way to facilitate "Load More" pagination with jQuery? - Stack Overflow

programmeradmin4浏览0评论

I'm displaying a list of search results on a page. At the very bottom I would like to place a "Load More" link which appends more results to existing ones on the page and changes the "Load more" link's parameters to next page, so that if user clicks it next page will be appended to the page. It would also be nice to have "Please wait" or some message appear while results are loading.

What's the most mon and practical way of doing this with jQuery?

Thanks!

I'm displaying a list of search results on a page. At the very bottom I would like to place a "Load More" link which appends more results to existing ones on the page and changes the "Load more" link's parameters to next page, so that if user clicks it next page will be appended to the page. It would also be nice to have "Please wait" or some message appear while results are loading.

What's the most mon and practical way of doing this with jQuery?

Thanks!

Share Improve this question edited Jan 23, 2011 at 23:38 hvgotcodes 120k33 gold badges207 silver badges237 bronze badges asked Jan 23, 2011 at 23:32 BugBusterXBugBusterX 2031 gold badge3 silver badges12 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

I use something similar to the following. It is a simplification of my working solution, leaving out irrelevant bits and pieces. Hope this can help you get started:

function loadMore(pageNo) {
    $("#loading").html('Loading...').show();
    var url = '/foo/';
    $.get(url, {pageNo: pageNo}, function(response) {
        $("#results").append(response);
        $("#loading").hide();
    });
}

$(document).ready(function() {
    var currPage = 1;
    $("a.next").click(function() {
        loadMore(++currPage);
    });
});

<a class="next">More results</a>

Not so difficult. Do the following

1) register a custom handler on your "load more" linke. For example, something like

$j('a[name=pageForward]').each(function() {
     $j(this).click(function(e) {
         e.preventDefault();
         defaultPage++;
         doSearch(defaultPage);
      });
})

note that I added a name attribute to my anchor tags. The doSearch does:

2) fires the ajax to load more. also, replace the content of load more with 'Loading' or whatever

$.ajax({
        url: url,
        data: queryString,
        dataType: json or xml,
        cache: false,
        beforeSend: function(xhr) {
        },
        success: function(data, status, xhr) {
        },
        error: function(xhr, status, errorText) {
            that.showNothing();
        },
        plete: function(xhr, status) {
        }
    });

Look in the jquery docs for $.ajax for what each of those mean. If you want you can handle modifying the dom in the before and plete callbacks that your register.

3) on ajax plete, populate the data, and change the link back (or remove your "Loading" message).

As personal preference, I would disable the link in 2, and have a special div with a "Loading" message appear with the loading is happening.

Also, something more advanced would be to create a jquery plugin for your paging view...

发布评论

评论列表(0)

  1. 暂无评论