JavaScript/jQuery کے ساتھ متحرک AJAX ڈیٹا کے لیے صفحہ بندی کا نفاذ

حل 1: jQuery کے ساتھ سادہ AJAX پر مبنی صفحہ بندی

یہ حل متحرک طور پر ڈیٹا لوڈ کرنے اور ملازمین کی فہرست کے لیے صفحہ بندی کو لاگو کرنے کے لیے ایک بنیادی 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 کا استعمال کرتے ہوئے، ڈیٹا کو قابل انتظام حصوں میں تقسیم کیا جا سکتا ہے، جس سے صارفین کے لیے بڑے ڈیٹا سیٹس کے ساتھ بات چیت کرنا آسان ہو جاتا ہے۔ یہ صفحہ لوڈ کرنے کا وقت کم کرتا ہے اور نیویگیشن کا ایک ہموار تجربہ فراہم کرتا ہے۔

صفحہ بندی کے علاوہ، چھانٹنے اور فلٹرنگ کی خصوصیات کو یکجا کرنے سے صارفین اپنی تلاش کو مؤثر طریقے سے بہتر بنا سکتے ہیں۔ یہ یقینی بناتا ہے کہ متحرک ڈیٹا تک رسائی نہ صرف آسان ہے بلکہ اسے صارف دوست انداز میں بھی پیش کیا گیا ہے۔ کلائنٹ سائیڈ آپٹیمائزیشن کا استعمال سسٹم کی مجموعی ردعمل کو مزید بہتر بناتا ہے۔