تنفيذ ترقيم الصفحات لبيانات AJAX الديناميكية باستخدام JavaScript/jQuery

الحل 1: ترقيم الصفحات البسيط المستند إلى AJAX باستخدام jQuery

يوضح هذا الحل أسلوب jQuery وAJAX الأساسي لتحميل البيانات ديناميكيًا وتنفيذ ترقيم الصفحات لقائمة الموظفين.

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

الحل 2: ترقيم الصفحات المعياري باستخدام JavaScript وAJAX

يوضح هذا الحل أسلوب JavaScript المعياري مع وظائف منفصلة لتحسين إمكانية إعادة الاستخدام والتعامل مع الفرز والبحث وترقيم الصفحات باستخدام AJAX.

// 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

1. كيف يعمل التخزين المؤقت من جانب العميل مع ترقيم الصفحات؟
2. يعمل التخزين المؤقت من جانب العميل عن طريق تخزين البيانات محليًا بعد استخدام الجلب الأول localStorage أو متغير جافا سكريبت. وهذا يلغي الحاجة إلى مكالمات AJAX اللاحقة عند الترقيم عبر البيانات.
3. ما هي فوائد التخزين المؤقت من جانب العميل في ترقيم الصفحات AJAX؟
4. يعمل التخزين المؤقت من جانب العميل على تحسين الأداء عن طريق تقليل تحميل الخادم وجعل التنقل في الصفحة أسرع. يتم جلب البيانات مرة واحدة وتخزينها محليًا، مما يعزز تجربة المستخدم عند التبديل بين الصفحات أو تطبيق المرشحات.
5. هل يمكن استخدام البيانات المخزنة مؤقتًا للبحث والفرز؟
6. نعم، بمجرد تخزين البيانات مؤقتًا، يمكن استخدامها filtering و sorting محليًا دون طلبات خادم إضافية. وينتج عن ذلك واجهة أسرع وأكثر استجابة للمستخدمين.
7. هل التخزين المؤقت مناسب لمجموعات البيانات المتغيرة بشكل متكرر؟
8. يعد التخزين المؤقت أكثر فعالية لمجموعات البيانات التي تتغير بشكل غير متكرر. بالنسبة لمجموعات البيانات الديناميكية، لا يزال من الممكن استخدام التخزين المؤقت ولكن سيلزم تحديثه بشكل دوري أو على مشغلات محددة لضمان اتساق البيانات.
9. كيف يمكنك مسح أو تحديث البيانات المخزنة مؤقتًا؟
10. يمكن مسح البيانات المخزنة مؤقتًا أو تحديثها عن طريق إزالتها يدويًا localStorage أو تحديث مجموعة البيانات عبر طلب AJAX جديد. على سبيل المثال، الدعوة localStorage.clear() سوف يمسح كافة البيانات المخزنة.

الأفكار النهائية حول المعالجة الفعالة للبيانات

يؤدي دمج ترقيم الصفحات في جلب البيانات الديناميكية إلى تحسين الأداء وتجربة المستخدم. باستخدام JavaScript/jQuery، يمكن تقسيم البيانات إلى أجزاء يمكن التحكم فيها، مما يسهل على المستخدمين التفاعل مع مجموعات البيانات الكبيرة. وهذا يقلل من وقت تحميل الصفحة ويوفر تجربة تنقل سلسة.

بالإضافة إلى ترقيم الصفحات، يتيح الجمع بين ميزات الفرز والتصفية للمستخدمين تحسين بحثهم بكفاءة. وهذا يضمن أن البيانات الديناميكية ليس من السهل الوصول إليها فحسب، بل يتم تقديمها أيضًا بطريقة سهلة الاستخدام. يؤدي استخدام التحسين من جانب العميل إلى تحسين الاستجابة الشاملة للنظام.