Как показать больше списка с помощью jquery - PullRequest
Новая
       29

Как показать больше списка с помощью jquery

4 голосов
/ 16 января 2010

Я вытаскиваю сообщения и отображаю их с помощью PHP / MySQL.

Теперь я хочу показать только 10 списков.

И я хочу добавить кнопку. Когда я нажимаю эту кнопку, она плавно скользит вниз и показывает еще 10, всего 20 сообщений.

И если я нажму кнопку, она снова сдвинется вниз и покажет всего 30 сообщений.

Может ли кто-нибудь научить меня, как это сделать с помощью jquery, пожалуйста?

Заранее спасибо.

Ответы [ 3 ]

3 голосов
/ 16 января 2010

В принципе, вам нужен контейнер, в который будут помещаться все вновь полученные сообщения. 

<div id="messages">
    <! -- message 1 -->
    <! -- message 2 -->
    <div id="newMessages">
    </div>
</div>

Затем вам нужна кнопка (или привязка, или что-то еще), которую вы можете подключить к извлечению-больше-метод: 

<input type="button" value="Fetch more messages" id="btnFetchMessages" />

Поместите соединение где-нибудь внутри DOMReady: 

var lastFetchedMessage = 0;

$('#btnFetchMessages').click(function() {
    $.ajax({
        url: '/getMessages.php',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: '{"lastId":'+lastFetchedMesasge+'"}',
        success: newMessagesReceived
});

Итак, одним нажатием кнопки мы отправляем запрос AJAX на getMessages.php, где вы посмотритеlastFetchedMessage и вернуть примерно 10 следующих сообщений, основанных на этом.С этой страницы вы возвращаете массив JSON , содержащий сообщения со всей интересующей их информацией.

При успешном запросе AJAX будет вызываться функция newMessagesReceived: 

function newMessagesReceived(result) {
    var container = $('#newMessages');

    for(var i = 0; i < result.length; i++) {
        var message = $('<div>' + result[i].body + '</div>');
        container.append(message);
    }

    var lastFetchedMessage = result[i].id;
}

Выше предполагается, что вы возвращаете массив с сообщениями, которые имеют как минимум свойства body и id: 

[ { "body": "new message1", "id": "10" }, { "body": "new message2", "id": "11" } ]
3 голосов
/ 16 января 2010

В моем последнем проекте я использую jQuery tools scrollable , чтобы отобразить 20 новых элементов в списке (<ul><li>). Когда список прокручивается до последней страницы, я выбираю следующие 20 элементов, а затем добавляю его в конец списка, используя встроенные инструменты jquery api. Это будет продолжаться до тех пор, пока запрос AJAX не вернет пустой результат, указывающий на отсутствие списка в базе данных. У меня есть переменная в качестве флага, затем я установил для нее значение false, поэтому ни один AJAX-запрос не сработал при прокрутке списка до последней страницы.

Вы можете увидеть, что это выглядит как домашняя страница в твиттере, но без ссылки «больше», поскольку список добавляется автоматически.

К сожалению, сейчас проект все еще в альфа-версии, поэтому я не могу показать его здесь. Вы можете попробовать и опубликовать свой код здесь, и я помогу вам настроить его.

0 голосов
/ 16 января 2010

Использование JavaScript для хранения информации о состоянии отображения количества строк и т. Д.

Пусть кнопка вызывает функцию JS, которая возвращает данные через ajax. Результатом вызова ajax может быть HTML, который может быть вставлен в тег div. Функция JS должна обновлять информацию о состоянии (каждый раз увеличивая количество строк и т. Д.) И передавать эту информацию о состоянии в вызов ajax.

Целью вызова ajax может быть PHP-скрипт, который выполняет запрос MySQL и генерирует HTML, который передается обратно.

...