Σελιδοποίηση σε Vanilla JavaScript

Εισαγωγή

Όταν δημιουργείτε έναν ιστότοπο ή μια διαδικτυακή εφαρμογή, ειδικά εάν διαθέτουν πολλά πρότυπο περιεχόμενο (όπως ένα πλέγμα ή μια λίστα στοιχείων που ανήκουν σε μια κατηγορία) – γενικά είναι καλή ιδέα να χωρίστε το σε σελίδες για να μειώσετε τον αριθμό των στοιχείων που εμφανίζονται στην οθόνη ταυτόχρονα.

Σε αυτό το άρθρο, θα μάθουμε πώς να εφαρμόζουμε τη σελιδοποίηση στα έργα ιστού μας χρησιμοποιώντας JavaScript βανίλια από την αρχή.

Για τους σκοπούς αυτού του άρθρου, θα λάβουμε το περιεχόμενο από αυτό παράδειγμα απάντησης API. Περιέχει 100 σημεία δεδομένων, αλλά θα χρησιμοποιούμε μόνο 30 και θα εμφανίζουμε 6 αναρτήσεις στην οθόνη μας κάθε φορά.

Ξεκινώντας

Πριν ανακτήσουμε όλες τις απαιτούμενες αναρτήσεις από το API χρησιμοποιώντας το ενσωματωμένο πρόγραμμα περιήγησης Fetch API, πρέπει πρώτα να δημιουργήσουμε μια βασική σήμανση HTML που θα συμπληρωθεί δυναμικά μέσω του σεναρίου μας αργότερα:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Λήψη αναρτήσεων REST API

Όπως αναφέρθηκε προηγουμένως, η σελιδοποίηση έχει να κάνει με το διαχωρισμό του περιεχομένου σε μικρότερα κομμάτια. Απαιτεί από εσάς να ανακτήσετε τα δεδομένα, να αποφασίσετε πότε και πώς να χωρίσετε, να υπολογίσετε τον αριθμό των σελίδων και, στη συνέχεια, να εμφανίσετε ένα μέρος τους στον χρήστη. Ευτυχώς – η λειτουργία back-end συνήθως φροντίζει τις πρώτες εργασίες και επιστρέφει τη σχετική σελίδα, τον συνολικό αριθμό σελίδων και το περιεχόμενο Ανά σελίδα.

Ας ξεκινήσουμε λαμβάνοντας πρώτα όλες τις αναρτήσεις μας και, στη συνέχεια, θα το τροποποιήσουμε για να ρωτήσουμε μόνο μερικά σημεία δεδομένων ανά σελίδα:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Ας εξετάσουμε γρήγορα τον παραπάνω κώδικα. Πρώτα απ 'όλα, ξεκινήσαμε με την απόκτηση του div στοιχείο όπου θα εμφανίζαμε όλο το περιεχόμενό μας μέσω του class όνομα που δώσαμε στο div. Τέλος, γράψαμε μια συνάρτηση για τον χειρισμό της λειτουργίας ανάκτησης.

Στο fetchPosts() λειτουργία, χρησιμοποιήσαμε το φέρω API για ανάκτηση αναρτήσεων από το API αναρτήσεων JSON Placeholder, στη συνέχεια αποθηκεύστε τα δεδομένα JSON που αναφέρονται από το posts μεταβλητή και χρησιμοποίησε το innerHTML ιδιότητα για να προσθέσετε κάθε κομμάτι περιεχομένου στο posts-section περνώντας μέσα από αυτά.

Σε αυτό το σημείο, έχουμε πάρει με επιτυχία όλο το περιεχόμενό μας.

Ας ξεκινήσουμε δηλώνοντας τρεις μεταβλητές που είναι κρίσιμες για την εφαρμογή σελιδοποίησης στην ιστοσελίδα μας. Το πρώτο είναι το αριθμός αναρτήσεων που θέλουμε να δηλώσουμε ανά σελίδα, μετά το τρέχον αριθμό σελίδας (1 από προεπιλογή), και το συνολικός αριθμός σελίδων.

Για αυτόν τον οδηγό θα δώσουμε το συνολικός αριθμός σελίδων ένας σταθερός αριθμός από 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

Στην προηγούμενη ενότητα, εμφανίσαμε όλες τις αναρτήσεις σε μία σελίδα, αλλά θέλουμε να εμφανίζουμε μόνο έξι τη φορά. Ως εκ τούτου, έχουμε ορίσει το numberPerPage προς την 6 που θα χρησιμοποιήσουμε τώρα για να προσαρμόσουμε τη λειτουργία ανάκτησης έτσι ώστε να εμφανίζεται μόνο 6 δημοσιεύσεις.

Εξαρτάται από τη συγκεκριμένη υλοποίηση, αλλά είναι ευρέως διαδεδομένη πρακτική να επιτρέπεται η χρήση παραμέτρων ερωτήματος κατά την ανάκτηση αποτελεσμάτων από API, τα οποία σας επιτρέπουν να ανακτήσετε ένα συγκεκριμένο σελίδα των αποτελεσμάτων. Για παράδειγμα, το εικονικό REST API που χρησιμοποιούμε επιτρέπει το page και limit παραμέτρους που σας επιτρέπουν να φορτώνετε μόνο παρτίδες που θα εμφανίζετε σε μια δεδομένη στιγμή.

Με αυτόν τον τρόπο, φορτώνουμε μόνο τα δεδομένα που θέλουμε να δείξουμε στον χρήστη! Στη συνέχεια, μπορούμε είτε να προκαλέσουμε την επόμενη σελίδα για ταχύτερο χρόνο φόρτωσης είτε να απολαύσουμε την υπολογιστική επιτάχυνση που επιτυγχάνεται με τη φόρτωση μόνο των δεδομένων που θα εμφανίζονται.

Θα χρησιμοποιήσουμε αυτές τις παραμέτρους τροποποιώντας το αίτημα ανάκτησης:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Στον παραπάνω κώδικα, προσθέσαμε τις δύο παραμέτρους στο τελικό σημείο του API που είναι το pageNumber και την αριθμός αναρτήσεων ανά σελίδα που θα μας βοηθούσε να χωρίσουμε τις αναρτήσεις μας σε πολλές σελίδες και στη συνέχεια αυτές οι αναρτήσεις μπορούν πλέον να εμφανίζονται με βάση τον αριθμό της σελίδας.

Επιπλέον, περάσαμε και στο pageNumber στο fetchPosts() συνάρτηση ώστε να μπορούμε να καλούμε αυτήν τη συνάρτηση κάθε φορά που αλλάζει η σελίδα:

Ας προσθέσουμε τώρα τη λειτουργικότητα στα κουμπιά πλοήγησης της σελίδας στο κάτω μέρος της σελίδας μας και ας εμφανίσουν το κατάλληλο περιεχόμενο με βάση τον αριθμό της σελίδας.

Θα παρατηρήσουμε ότι στη σήμανση είχαμε μια ενότητα που εμφανίζει τα κουμπιά σελιδοποίησης:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

Τώρα θα προσθέσουμε click συμβάντα σε κάθε κουμπί, έτσι ώστε όταν κάνετε κλικ σε αυτά, να εμφανίζεται το περιεχόμενο που προορίζεται για τη συγκεκριμένη σελίδα.

Εφαρμογή του Προηγούμενο Κουμπί

Η λογική εδώ είναι αρκετά απλή. Το μόνο που έχουμε να κάνουμε είναι να ανακτήσουμε το στοιχείο που αντιπροσωπεύει το προηγούμενο κουμπί, πρόσθεσε το click πρόγραμμα ακρόασης συμβάντος σε αυτό και εμφανίζει το κατάλληλο περιεχόμενο όταν πατηθεί το κουμπί:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

Μετά την προσθήκη α click πρόγραμμα ακρόασης συμβάντος, ελέγξαμε αν ο τρέχων αριθμός σελίδας είναι μεγαλύτερος από 1 στη λειτουργία επιστροφής κλήσης. Αν ο αριθμός είναι ίσος ή μικρότερος από 1, απλώς θα συνεχίσουμε να εμφανίζουμε το τρέχον περιεχόμενο. Αλλά αν ο τρέχων αριθμός σελίδας είναι μεγαλύτερος από 1 μπορούμε ελεύθερα να μειώσουμε την αξία του και να ονομάσουμε το fetchPosts(pageNumber) συνάρτηση με τον νέο αριθμό σελίδας που μεταβιβάζεται σε αυτήν ως όρισμα, εμφανίζοντας επομένως το περιεχόμενο της προηγούμενης σελίδας.

Εφαρμογή του Επόμενο Κουμπί

Η λογική εδώ είναι εντελώς η ίδια όπως και για το προηγούμενος κουμπί, με λίγες μόνο μικρές αλλαγές. Φυσικά, θα ανακτήσουμε το στοιχείο λίστας με την κλάση next αντί του prev. Επίσης, θα ελέγξουμε αν ο τρέχων αριθμός σελίδας είναι μικρότερος από τον αριθμός σελίδων που ρυθμίσαμε 30 χειροκίνητα νωρίτερα. Στο τέλος, θα αυξήσουμε τον τρέχοντα αριθμό σελίδας αντί να τον μειώσουμε:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

Συμπέρασμα

Ο διαχωρισμός του περιεχομένου σε μικρότερα, πιο διαχειρίσιμα κομμάτια που εμφανίζονται μεμονωμένα είναι ζωτικής σημασίας κάθε φορά που προσπαθείτε να εμφανίσετε μια βάση δεδομένων ή οποιαδήποτε άλλη πηγή δεδομένων στην εφαρμογή Ιστού σας.

Σε αυτό το άρθρο, ρίξαμε μια ματιά στον τρόπο υλοποίησης της σελιδοποίησης με JavaScript από την αρχή, χωρίς εξωτερικές βιβλιοθήκες και εργαλεία.

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://stackabuse.com/pagination-in-vanilla-javascript/