Каков наилучший способ разбить результаты на XML с использованием jQuery?

Question

Я использую jQuery для получения результатов в виде xml из базы данных MySQL. Каков наилучший способ разбить результаты на страницы?

Прямо сейчас мой скрипт получает xml и добавляет каждый результат как элемент <li> к элементу <ul>.

Я предполагаю, что это будет как-то связано с созданием глобальной переменной, которая изменяется с помощью кнопки «Следующая / Предыдущая страница», которая запускает скрипт для удаления, а затем повторно добавляет правильный диапазон результатов, но я не совсем точно.

Answer 1

Вы не должны делать пагинацию зависимой от Javascript, это следует делать на стороне сервера. Так, например, сервер может вернуть «следующую» ссылку, которая будет выглядеть примерно так: <a href="results.php?entry=50">View next 50 results</a>. Сценарий примет эту переменную 50 и вернет 50 следующих результатов, а затем ссылка будет возвращена как results.php?entry=100. Однако вы можете интегрировать это с Ajax, чтобы результаты возвращались без обновления страницы, но сама разбивка на страницы все равно выполнялась бы в бэкэнде.

Answer 2

Получаете ли вы весь набор результатов (все страницы) за один раз, или вы получаете одну страницу за раз? В любом случае вы должны хранить локальный кеш данных, полученных с сервера, и использовать его, когда пользователь перемещается по страницам. Например, если вы извлекаете по одной странице за раз, и пользователь переходит со страницы 1 на страницу 2, вам необходимо извлечь страницу 2 с сервера. Но если пользователь теперь возвращается на страницу 1, вам следует загрузить его из кеша. Если пользователь переходит на страницу 3, вы должны извлечь это с сервера и добавить в кеш.

Далее я бы выделил логику для отображения одной страницы пользователю и извлечения страницы с сервера. Когда пользователь нажимает кнопку следующей страницы, вы должны запросить объект кэша для следующей страницы, но ничего не возвращать. Вместо этого кеш вызовет функцию обратного вызова, как только у него появятся данные. Если данные находятся в кэше, он немедленно вызовет функцию обратного вызова, передавая результат в качестве аргумента. Функция обратного вызова затем обновит представление, представленное пользователю. Если данные не находятся в кеше, на сервер делается запрос ajax для этих данных. Как только данные получены, будет вызвана функция обратного вызова.

Я обычно против использования xml с ajax (я предпочитаю ajaj; асинхронный JavaScript и JSON. Гораздо веселее говорить вслух). JSON - лучшая альтернатива, потому что с JavaScript намного проще работать, он занимает меньше места, как в памяти, так и во время транспортировки. Поскольку объекты JSON являются обычными объектами JavaScript, добавить их в локальный кеш так же просто, как объединить два массива (кеш, который у вас уже есть, и новые элементы, полученные с сервера).

Answer 3

Есть несколько плагинов , но вы на правильном пути. Когда вы выполните удаление / повторное добавление, выполните загрузку $ ('# mydiv'). Load ('/ path / to / myfile.php'). Передайте вашему файлу начальную и конечную точки, которые будут служить точками в вашем массиве, из которых будут собираться ваши данные.

function paginate(start, limit) {
    // Maybe show a preloader?
    $('#loader').show();

    $("#mydiv").load("/path/to/myfile.php", {start: start, end: limit}, function(){
       // hide preloader or do other code here
        $('#loader').hide();
     });
}

Answer 4

я бы сделал что-то подобное

var numRows = $table.find('tbody tr').length

var numPages = Math.ceil(numRows / numPerPage)

var $pager = $('</p><br>

<div class="pager"></div>

')

for (var page = 0 page < numPages page++) {

$('<span class="page-number">' + (page + 1) + '</span>')

.appendTo($pager).addClass('clickable')

}

$pager.insertBefore($table)