تنفيذ ترقيم الصفحات لبيانات 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	حاوية.innerHTML = '';يعالج هذا الأمر محتوى HTML الخاص بالعنصر مباشرةً. يتم استخدامه هنا لمسح حاوية الموظف قبل عرض مجموعة الموظفين الجديدة للصفحة المحددة.
appendChild()	حاوية.appendChild(card);يُستخدم هذا الأمر لإلحاق عنصر جديد (بطاقة) بالحاوية. إنها جزء من عملية إنشاء بطاقات الموظفين وعرضها ديناميكيًا للصفحة الحالية.
addEventListener()	pageBtn.addEventListener('click', function() {...});يستمع هذا الأمر لحدث محدد (على سبيل المثال، نقرة) على عنصر ما. هنا، يسمح لأزرار ترقيم الصفحات بالتفاعل مع نقرات المستخدم، مما يؤدي إلى عرض الصفحة.
forEach()	paginatedData.forEach(function(employee) {...});يتكرر هذا الأمر على مجموعة من الموظفين، وينفذ وظيفة على كل عنصر. يعد ذلك أمرًا حيويًا لعرض الملف الشخصي لكل موظف في البيانات المرقّمة.
fetch()	جلب('./assets/employeeDirectory.json')يبدأ أمر الجلب طلب 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. يعمل التخزين المؤقت من جانب العميل عن طريق تخزين البيانات محليًا بعد استخدام الجلب الأول أو متغير جافا سكريبت. وهذا يلغي الحاجة إلى مكالمات AJAX اللاحقة عند الترقيم عبر البيانات.
3. ما هي فوائد التخزين المؤقت من جانب العميل في ترقيم الصفحات AJAX؟
4. يعمل التخزين المؤقت من جانب العميل على تحسين الأداء عن طريق تقليل تحميل الخادم وجعل التنقل في الصفحة أسرع. يتم جلب البيانات مرة واحدة وتخزينها محليًا، مما يعزز تجربة المستخدم عند التبديل بين الصفحات أو تطبيق المرشحات.
5. هل يمكن استخدام البيانات المخزنة مؤقتًا للبحث والفرز؟
6. نعم، بمجرد تخزين البيانات مؤقتًا، يمكن استخدامها و محليًا دون طلبات خادم إضافية. وينتج عن ذلك واجهة أسرع وأكثر استجابة للمستخدمين.
7. هل التخزين المؤقت مناسب لمجموعات البيانات المتغيرة بشكل متكرر؟
8. يعد التخزين المؤقت أكثر فعالية لمجموعات البيانات التي تتغير بشكل غير متكرر. بالنسبة لمجموعات البيانات الديناميكية، لا يزال من الممكن استخدام التخزين المؤقت ولكن سيلزم تحديثه بشكل دوري أو على مشغلات محددة لضمان اتساق البيانات.
9. كيف يمكنك مسح أو تحديث البيانات المخزنة مؤقتًا؟
10. يمكن مسح البيانات المخزنة مؤقتًا أو تحديثها عن طريق إزالتها يدويًا أو تحديث مجموعة البيانات عبر طلب AJAX جديد. على سبيل المثال، الدعوة سوف يمسح كافة البيانات المخزنة.