Comment afficher plus de liste en utilisant jquery

Question

Je sors des messages et affiche avec PHP/MySQL.

Maintenant je veux montrer seulement 10 listes.

Et je veux ajouter un bouton. Quand je clique sur ce bouton, il glisse doucement et montre 10 autres, 20 messages au total.

Et si je clique sur le bouton, il glisse à nouveau vers le bas et affiche un total de 30 messages.

Quelqu'un pourrait-il me dire comment le faire avec jquery s'il vous plaît?

Merci d'avance.

Answer 1

Utilisez javascript pour contenir des informations d'état sur le nombre de lignes sont en cours d'affichage, etc.

Demandez le bouton appeler une fonction JS qui renvoie des données via ajax. Le résultat de l'appel ajax peut être HTML et injecté dans une balise div. La fonction JS doit mettre à jour les informations d'état (en augmentant le nombre de lignes à chaque fois, etc.) et transmettre ces informations d'état à l'appel ajax.

La cible de l'appel ajax peut être un script PHP qui exécute la requête MySQL et génère le code HTML qui est renvoyé.

Answer 2

En principe, vous voulez un conteneur où placer tous les nouveaux messages récupérés.

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

alors vous voulez un bouton (ou l'ancre, ou autre) que vous pouvez brancher un fetch-plus-méthode:

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

Placez le raccordement quelque part à l'intérieur 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 
}); 

Donc, sur un clic du bouton, nous soumettons une requête AJAX à getMessages.php où vous regarderez le lastFetchedMessage et retournerez les 10 messages suivants en fonction de cela. Sur cette page, vous retournez un tableau JSON contenant les messages, avec toutes leurs informations que vous êtes intéressé par

Sur un reques AJAX avec succès, le funciton newMessagesReceived seront appelés.

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; 
} 

ci-dessus on suppose que vous retourner un tableau avec des messages, qui ont au moins les propriétés body et id:

[ { "body": "new message1", "id": "10" }, { "body": "new message2", "id": "11" } ] 

Answer 3

Dans mon dernier projet, je l'utilise pour afficher jQuery tools scrollable 20 plus récent élément dans une liste (<ul><li>). Lorsque la liste a défilé jusqu'à la dernière page, je récupère les 20 éléments suivants, puis je l'ajoute à la fin de la liste, en utilisant build in jquery tools api. Cela continuera jusqu'à ce que la requête AJAX renvoie un résultat vide, qui n'indique plus de liste dans la base de données. J'ai une variable comme drapeau, puis je la mets à false, donc aucune requête AJAX n'a ​​été tirée quand la liste a défilé jusqu'à la dernière page.

Vous pouvez voir qu'il ressemble à la page d'accueil de Twitter, mais sans le lien 'more', puisque la liste est ajoutée automatiquement.

Malheureusement pour le moment le projet est toujours en alpha, donc je ne peux pas le montrer ici.Vous pouvez l'essayer et poster votre code ici, et je vais vous aider à le modifier.