Εφαρμογή σελιδοποίησης για δυναμικά δεδομένα AJAX με JavaScript/jQuery

Δυναμική σελιδοποίηση για δεδομένα AJAX

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

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

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

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

Εντολή	Παράδειγμα χρήσης
slice()	var paginatedData = data.slice(start, end);Αυτή η εντολή χρησιμοποιείται για την εξαγωγή ενός τμήματος ενός πίνακα. Σε αυτό το παράδειγμα, χρησιμοποιείται για τη σελιδοποίηση των δεδομένων επιλέγοντας ένα υποσύνολο υπαλλήλων για εμφάνιση στην τρέχουσα σελίδα.
Math.ceil()	var totalPages = Math.ceil(totalItems / itemsPerPage);Στρογγυλοποιεί έναν αριθμό στον πλησιέστερο ακέραιο. Αυτό είναι κρίσιμο για τη σελιδοποίηση για τον προσδιορισμό του ακριβούς αριθμού σελίδων που απαιτούνται για την υποδοχή όλων των δεδομένων με βάση τα στοιχεία ανά σελίδα.
innerHTML	container.innerHTML = '';Αυτή η εντολή χειρίζεται απευθείας το περιεχόμενο HTML ενός στοιχείου. Χρησιμοποιείται εδώ για την εκκαθάριση του κοντέινερ υπαλλήλων πριν από την απόδοση του νέου συνόλου υπαλλήλων για την επιλεγμένη σελίδα.
appendChild()	container.appendChild(κάρτα);Αυτή η εντολή χρησιμοποιείται για την προσθήκη ενός νέου στοιχείου (κάρτας) σε ένα κοντέινερ. Αποτελεί μέρος της διαδικασίας δυναμικής δημιουργίας και εμφάνισης καρτών υπαλλήλων για την τρέχουσα σελίδα.
addEventListener()	pageBtn.addEventListener('κλικ', function() {...});Αυτή η εντολή ακούει για ένα καθορισμένο συμβάν (π.χ. ένα κλικ) σε ένα στοιχείο. Εδώ, επιτρέπει στα κουμπιά σελιδοποίησης να αντιδρούν στα κλικ του χρήστη, ενεργοποιώντας την απόδοση της σελίδας.
forEach()	paginatedData.forEach(function(Employee) {...});Αυτή η εντολή επαναλαμβάνεται πάνω από τον πίνακα των υπαλλήλων, εκτελώντας μια συνάρτηση σε κάθε στοιχείο. Είναι ζωτικής σημασίας για την απόδοση του προφίλ κάθε υπαλλήλου στα σελιδοποιημένα δεδομένα.
fetch()	fetch('./assets/employeeDirectory.json')Η εντολή fetch εκκινεί ένα αίτημα HTTP για ασύγχρονη ανάκτηση δεδομένων. Εδώ, χρησιμοποιείται για τη φόρτωση των δεδομένων υπαλλήλου από ένα αρχείο JSON μέσω AJAX.
on()	$('#pagination li').on('click', function() {...});Αυτή η εντολή jQuery προσαρτά προγράμματα χειρισμού συμβάντων σε στοιχεία. Σε αυτό το παράδειγμα, ενεργοποιεί τη σελιδοποίηση επιτρέποντας στον χρήστη να κάνει κλικ σε διαφορετικούς αριθμούς σελίδων και να φορτώσει τα αντίστοιχα δεδομένα.

Κατανόηση της σελιδοποίησης και της ταξινόμησης με AJAX σε JavaScript/jQuery

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

Μόλις ληφθούν τα δεδομένα, είναι απαραίτητο να αποδώσετε μόνο ένα συγκεκριμένο υποσύνολο με βάση την τρέχουσα σελίδα. Αυτό επιτυγχάνεται με τη χρήση του συνάρτηση, η οποία εξάγει ένα τμήμα του πίνακα δεδομένων για να εμφανίσει τους κατάλληλους υπαλλήλους για αυτήν τη σελίδα. Για παράδειγμα, εάν υπάρχουν 50 υπάλληλοι και ο χρήστης επιλέξει να προβάλει 8 στοιχεία ανά σελίδα, το σενάριο θα εμφανίζει μόνο τους υπαλλήλους 1-8 στη σελίδα 1, 9-16 στη σελίδα 2 κ.λπ. Αυτή η προσέγγιση επιτρέπει στον χρήστη να μετακινείται στα δεδομένα σε μικρότερα κομμάτια, βελτιώνοντας τόσο τους χρόνους φόρτωσης της σελίδας όσο και την πλοήγηση.

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

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

// Fetch data and implement pagination
$(document).ready(function() {
    var jsonData = [];
    var itemsPerPage = 8;
    var currentPage = 1;

    // Fetch employee data using AJAX
    $.ajax({
        url: './assets/employeeDirectory.json',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            jsonData = data;
            renderPage(jsonData, currentPage);
        },
        error: function() {
            alert('Failed to load data.');
        }
    });

    // Function to render employee data on the current page
    function renderPage(data, page) {
        var container = $('#profileContainer');
        container.empty();
        var start = (page - 1) * itemsPerPage;
        var end = start + itemsPerPage;
        var paginatedData = data.slice(start, end);

        paginatedData.forEach(function(employee) {
            var cardHtml = '<div class="card">' +
                '' +
                '<p>' + employee.department + '</p>' +
                '</div>';
            container.append(cardHtml);
        });

        updatePaginationButtons(data.length, page);
    }

    // Function to update pagination buttons
    function updatePaginationButtons(totalItems, currentPage) {
        var totalPages = Math.ceil(totalItems / itemsPerPage);
        $('#pagination').empty();

        for (var i = 1; i <= totalPages; i++) {
            $('#pagination').append('<li>' + i + '</li>');
        }

        $('#pagination li').on('click', function() {
            var page = $(this).text();
            currentPage = parseInt(page);
            renderPage(jsonData, currentPage);
        });
    }
});

// Fetch data and initialize pagination, sorting, and filtering
document.addEventListener('DOMContentLoaded', function() {
    var jsonData = [];
    var itemsPerPage = 8;
    var currentPage = 1;

    // Fetch employee data using AJAX
    fetch('./assets/employeeDirectory.json')
        .then(response => response.json())
        .then(data => {
            jsonData = data;
            renderPage(jsonData, currentPage);
        })
        .catch(() => alert('Failed to load data'));

    // Render the page with pagination
    function renderPage(data, page) {
        var container = document.getElementById('profileContainer');
        container.innerHTML = '';
        var start = (page - 1) * itemsPerPage;
        var end = start + itemsPerPage;
        var paginatedData = data.slice(start, end);

        paginatedData.forEach(function(employee) {
            var card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = '' +
                            '<p>' + employee.department + '</p>';
            container.appendChild(card);
        });

        updatePaginationButtons(data.length, page);
    }

    // Function to create pagination controls
    function updatePaginationButtons(totalItems, currentPage) {
        var totalPages = Math.ceil(totalItems / itemsPerPage);
        var pagination = document.getElementById('pagination');
        pagination.innerHTML = '';

        for (let i = 1; i <= totalPages; i++) {
            let pageBtn = document.createElement('li');
            pageBtn.innerText = i;
            pageBtn.addEventListener('click', function() {
                currentPage = i;
                renderPage(jsonData, currentPage);
            });
            pagination.appendChild(pageBtn);
        }
    }
});

Βελτίωση της σελιδοποίησης με προσωρινή αποθήκευση από την πλευρά του πελάτη

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

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

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

1. Πώς λειτουργεί η προσωρινή αποθήκευση από την πλευρά του πελάτη με τη σελιδοποίηση;
2. Η προσωρινή αποθήκευση από την πλευρά του πελάτη λειτουργεί με την αποθήκευση δεδομένων τοπικά μετά την πρώτη χρήση ή μια μεταβλητή JavaScript. Αυτό εξαλείφει την ανάγκη για επόμενες κλήσεις AJAX κατά τη σελιδοποίηση μέσω των δεδομένων.
3. Ποια είναι τα οφέλη της προσωρινής αποθήκευσης από την πλευρά του πελάτη στη σελιδοποίηση AJAX;
4. Η προσωρινή αποθήκευση από την πλευρά του πελάτη βελτιώνει την απόδοση μειώνοντας το φόρτο του διακομιστή και κάνοντας ταχύτερη την πλοήγηση στη σελίδα. Τα δεδομένα λαμβάνονται μία φορά και αποθηκεύονται τοπικά, γεγονός που βελτιώνει την εμπειρία χρήστη κατά την εναλλαγή μεταξύ σελίδων ή την εφαρμογή φίλτρων.
5. Μπορούν τα αποθηκευμένα δεδομένα να χρησιμοποιηθούν για αναζήτηση και ταξινόμηση;
6. Ναι, όταν τα δεδομένα αποθηκευτούν στην κρυφή μνήμη, μπορούν να χρησιμοποιηθούν για και τοπικά χωρίς πρόσθετα αιτήματα διακομιστή. Αυτό έχει ως αποτέλεσμα μια πιο γρήγορη και πιο ευαίσθητη διεπαφή για τους χρήστες.
7. Είναι η προσωρινή αποθήκευση κατάλληλη για συχνή αλλαγή συνόλων δεδομένων;
8. Η προσωρινή αποθήκευση είναι πιο αποτελεσματική για σύνολα δεδομένων που αλλάζουν σπάνια. Για δυναμικά σύνολα δεδομένων, η προσωρινή αποθήκευση μπορεί ακόμα να χρησιμοποιηθεί, αλλά θα πρέπει να ανανεώνεται περιοδικά ή σε συγκεκριμένους κανόνες ετικέτας για να διασφαλιστεί η συνέπεια των δεδομένων.
9. Πώς εκκαθαρίζετε ή ενημερώνετε τα αποθηκευμένα δεδομένα;
10. Τα αποθηκευμένα δεδομένα μπορούν να διαγραφούν ή να ενημερωθούν με μη αυτόματο τρόπο κατάργησή τους από ή ανανέωση του συνόλου δεδομένων μέσω νέου αιτήματος AJAX. Για παράδειγμα, καλώντας θα διαγράψει όλα τα αποθηκευμένα δεδομένα.