JQuery Pagination Проблемы - PullRequest
Новая
       15

JQuery Pagination Проблемы

0 голосов
/ 15 декабря 2011

Хорошо, поэтому я пытаюсь создать систему, состоящую из трех частей. Меню, область содержимого и область нумерации страниц. Каждая из этих областей, кроме меню, загружается с помощью вызова .load из jquery во время выполнения. Кстати, я делаю это как плагин для WordPress.

Например, при загрузке я загружаю posts.php через .load в класс .content, а page.php через .load в класс .pagination. Все это делается с настройками по умолчанию, то есть я отправляю настройки по умолчанию через почтовый метод загрузки Код меню есть с самого начала.

Проблема с нумерацией страниц. Мне бы хотелось, чтобы при нажатии на следующую страницу она загружала следующий контент и перемещала страницу вверх в системе нумерации страниц, и все это без загрузки всей страницы снова в WordPress. Я полагал, что jquery будет работать здесь, но проблема в том, что если я вызову пагинацию как вызов jquery, когда пользователь нажимает на следующую страницу, обнаружение должно быть вложено в первый вызов пагинации, верно? Который потому что массивная петля.

Таким образом, проблема заключается в том, как создать систему разбиения на страницы, которая будет вызывать следующий контент, загружать его в область контента и перемещать страницу вверх в своей собственной системе, без необходимости снова загружать всю страницу, поскольку она является плагином. в WordPress.

Любая помощь?

редактирование: Я хочу отметить, что я новичок в jQuery.

1 Ответ

1 голос
/ 15 декабря 2011

Предполагая, что ваш load() возвращает данные, которые выглядят примерно так: 

<ul>
    <li>item1</li>
    <li>item2</li>
</ul>
<div id='pagination'> 
    1 
    <a href='/path/to/this/page?page=2'>2</a>
    <a href='/path/to/this/page?page=3'>3</a>
</div>

Вы можете изменить все теги <a> после загрузки их в определенный div, например, так: 

$('#mymenu').load('/path/to/this/page?page=1', function(){
    setAjaxLinks();
});

И имейте функцию setAjaxLinks, определенную следующим образом: 

$('#mymenu').find('a').click(function(event){
    event.preventDefault();
    $('#mymenu').load($(this).attr('href'), function(){
        setAjaxLinks();
    });
    return false;
});

Ключевой момент функции setAjaxLinks заключается в том, что она устанавливает функцию для того, что делать при нажатии на ссылку.А именно:

  1. Отправьте запрос AJAX для следующей страницы и загрузите его в соответствующее место на странице.

  2. Найдите в ответе пейджинговые ссылки и заменитеих click событий с тем, что мы хотели бы сделать с помощью пейджинговых ссылок, то есть ...

    A.Отправьте запрос AJAX .. и

    B.Найдите в ответе пейджинговые ссылки и замените их click события на ....

Так что в итоге мы получим рекурсивный вызов setAjaxLinks.

...