Question 222045 in Html Question posted in
Some basic documentation can be found here.

How do I re-paginate JavaScript/HTML Card elements?

I have a chat application. In this chat application, messages sent in the past are visible, but as the number of messages increases, the page length increases too much. Can I paginate every 10 posts as 1 page in this app?
JavaScript code that adds past chats:

socket.on('old_messages', (msg) => {
    msg.forEach(element => {
        let messageContent = " <p class='card'><b>" + element.username + ": </b>" + element.content + "</p>";
        MESSAGE_LIST.innerHTML = messageContent + MESSAGE_LIST.innerHTML;
    });
});

Screenshot from the app:
enter image description here

Tags:

3

Answers


  1. 0

    For UI: Ideally, your chat application should be a defined sized div on the page in which the messages are shown. You can enable scroll in that div and keep the view at the most recent message.

    For messages: Show N number of messages at a time and old messages should not be rendered when the user scrolls towards them.

    Option 1 Fetch messages from the backend when user scrolls towards the old messages. This assumes that you have a paginated API that can return N number of messages based on page size and page number.

    Option 2 If you don’t have backend paginated API to pull messages then you can store messages in different array in frontend and rendered messages using different array. As the user scrolls, move the messages from first array to second to render them. NOTE: This method will make the webpage slower as the number of messages will increase.

    Login or Signup to reply.
  2. 0

    Well, you can use Array.slice method to get the pagination done.

    socket.on('old_messages', (msg) => {
    let paginatedMsg = msg.slice(pageNumber * 10 - 10, pageNumber * 10);
    paginatedMsg.forEach(element => {
        let messageContent = " <p class='card'><b>" + element.username + ": </b>" + element.content + "</p>";
        MESSAGE_LIST.innerHTML = messageContent + MESSAGE_LIST.innerHTML;
    });
});

    But this is not the best catch, actually.
    The best practice is to make the backend send the data according to pagination options.

    Login or Signup to reply.
  3. 0

    you can try the following:

    const PAGE_SIZE = 10; // Number of messages per page
let currentPage = 1; // Current page number

socket.on('old_messages', (msg) => {
    // Calculate the starting index of messages for the current page
    const startIndex = (currentPage - 1) * PAGE_SIZE;

    // Extract only the messages for the current page
    const messagesForCurrentPage = msg.slice(startIndex, startIndex + PAGE_SIZE);

    // Clear the existing content
    MESSAGE_LIST.innerHTML = '';

    // Append the messages to the message list
    messagesForCurrentPage.forEach(element => {
        let messageContent = "<p class='card'><b>" + element.username + ": </b>" + element.content + "</p>";
        MESSAGE_LIST.innerHTML += messageContent;
    });
});

// Function to go to the next page
function nextPage() {
    currentPage++;
    socket.emit('get_old_messages', currentPage); // Request messages for the next page
}

// Function to go to the previous page
function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        socket.emit('get_old_messages', currentPage); // Request messages for the previous page
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search