Какой лучший способ облегчить нумерацию страниц «Загрузить еще» с помощью jQuery?

Question

Я отображаю список результатов поиска на странице. В самом низу я хотел бы разместить ссылку «Загрузить еще», которая добавляет дополнительные результаты к уже существующим на странице и изменяет параметры ссылки «Загрузить больше» на следующую страницу, так что если пользователь щелкнет ее, следующая страница будет добавлена страница. Также было бы неплохо, чтобы при загрузке результатов появлялось сообщение «Пожалуйста, подождите» или появилось какое-то сообщение.

Какой самый распространенный и практичный способ сделать это с помощью jQuery?

Спасибо!

Answer 1

Я использую что-то похожее на следующее.Это упрощение моего рабочего решения, исключая ненужные фрагменты.Надеюсь, что это поможет вам начать:

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>

Answer 2

Не так сложно. Сделайте следующее

1) зарегистрируйте пользовательский обработчик на своей ссылке «загрузить еще». Например, что-то вроде

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

обратите внимание, что я добавил атрибут name к своим тегам привязки. DoSearch делает:

2) запускает Аякс, чтобы загрузить больше. также замените содержимое load more на «Loading» или что-то еще

$.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();
        },
        complete: function(xhr, status) {
        }
    });

Посмотрите в документации по jquery $ .ajax, что означает каждый из них. Если вы хотите, вы можете обработать изменение DOM до и завершить обратные вызовы, которые ваш регистр.

3) после завершения ajax заполните данные и измените ссылку (или удалите сообщение «Загрузка»).

Как личное предпочтение, я бы отключил ссылку в 2, и у меня появился специальный div с сообщением "Загрузка", когда загрузка происходит.

Кроме того, более продвинутым было бы создание плагина jquery для вашего представления подкачки ...