JavaScript/jQuery ile Dinamik AJAX Verileri için Sayfalandırmanın Uygulanması

AJAX Verileri için Dinamik Sayfalandırma

Web uygulamalarında büyük veri kümelerinin verimli bir şekilde işlenmesi, kullanıcı deneyiminin geliştirilmesi açısından çok önemlidir. AJAX istekleri aracılığıyla getirilen verilerin görüntülenmesi söz konusu olduğunda sayfalandırma, kullanıcı arayüzünü temiz ve yönetilebilir tutmak için en iyi çözümlerden biridir. Verileri daha küçük parçalara bölen sayfalandırma, kullanıcıların sayfayı çok fazla içerikle doldurmadan listede zahmetsizce gezinmesine olanak tanır.

JavaScript ve jQuery, özellikle veriler AJAX kullanılarak sunucudan dinamik olarak alınırken, sayfalandırmayı uygulamak için güçlü araçlar sunar. Bu teknolojiler, geliştiricilerin, kullanıcı etkileşimine dayalı olarak her sayfada yalnızca bir veri alt kümesini göstererek büyük veri kümelerini yönetmesine olanak tanır.

Sıralama, filtreleme ve arama işlevlerinin entegre edilmesi kullanıcı deneyimini daha da zenginleştirir. Verileri adlar veya departmanlar gibi niteliklere göre sıralamak, kategorilere göre filtrelemek ve küresel bir aramayı etkinleştirmek, büyük veri kümelerinin erişilebilirliğini geliştirmek için çok önemlidir. Sayfalandırmayla birlikte bu teknikler optimum veri yönetimini sağlar.

Bu kılavuzda, JavaScript/jQuery kullanarak dinamik olarak getirilen bir veri kümesinde sayfalandırmanın nasıl uygulanacağını keşfederek size veri görüntülemeyi daha verimli bir şekilde kontrol etmek için bir çözüm sunacağız. Ayrıca filtrelerin entegrasyonu, sıralama ve hataların ele alınması gibi olası sorunları da tartışarak büyük veri kümelerinin yönetimine kapsamlı bir yaklaşım sunacağız.

Emretmek	Kullanım örneği
slice()	var paginatedData = data.slice(başlangıç, bitiş);Bu komut bir dizinin bir bölümünü çıkarmak için kullanılır. Bu örnekte, geçerli sayfada görüntülenecek çalışanların bir alt kümesini seçerek verileri sayfalara ayırmak için kullanılır.
Math.ceil()	var totalPages = Math.ceil(totalItems / itemsPerPage);Bir sayıyı en yakın tam sayıya yuvarlar. Bu, sayfa başına öğelere dayalı olarak tüm verileri barındırmak için gereken tam sayfa sayısını belirlemek amacıyla sayfalandırma açısından kritik öneme sahiptir.
innerHTML	konteyner.innerHTML = '';Bu komut, bir öğenin HTML içeriğini doğrudan yönetir. Burada, seçilen sayfa için yeni çalışan kümesini oluşturmadan önce çalışan kapsayıcısını temizlemek için kullanılır.
appendChild()	Container.appendChild(kart);Bu komut, konteynere yeni bir öğe (kart) eklemek için kullanılır. Geçerli sayfa için çalışan kartlarını dinamik olarak oluşturma ve görüntüleme sürecinin bir parçasıdır.
addEventListener()	pageBtn.addEventListener('tıklayın', function() {...});Bu komut, bir öğe üzerinde belirtilen bir olayı (örneğin bir tıklama) dinler. Burada, sayfalandırma düğmelerinin kullanıcı tıklamalarına tepki vererek sayfa oluşturmayı tetiklemesine olanak tanır.
forEach()	paginatedData.forEach(function(çalışan) {...});Bu komut, her öğe üzerinde bir işlev yürüterek çalışanlar dizisi üzerinde yinelenir. Sayfalandırılmış verilerde her çalışanın profilini oluşturmak hayati önem taşır.
fetch()	fetch('./assets/employeeDirectory.json')Fetch komutu, verileri eşzamansız olarak almak için bir HTTP isteği başlatır. Burada çalışan verilerinin bir JSON dosyasından AJAX aracılığıyla yüklenmesi için kullanılır.
on()	$('#pagination li').on('tıklayın', function() {...});Bu jQuery komutu, olay işleyicilerini öğelere ekler. Bu örnekte, kullanıcının farklı sayfa numaralarına tıklamasına ve ilgili verileri yüklemesine olanak tanıyarak sayfalandırmayı etkinleştirir.

JavaScript/jQuery'de AJAX ile Sayfalandırmayı ve Sıralamayı Anlamak

Yukarıda verilen komut dosyaları, büyük veri kümelerini verimli bir şekilde görüntüleme sorununu, ve dinamik veri alma . Temel konsept, bir JSON dosyasından çalışanların bir listesini almak ve verileri yönetilebilir bölümlere bölerek kullanıcıların sayfayı bunaltmadan bunlar arasında gezinmesine olanak tanımak etrafında dönüyor. AJAX, bu verileri eşzamansız olarak almak için kullanılır ve farklı veri sayfaları arasında geçiş yaparken sayfanın tamamını yeniden yükleme ihtiyacını ortadan kaldırır. Bu, performansı ve kullanıcı deneyimini korumak için çok önemlidir.

Veriler alındıktan sonra geçerli sayfaya göre yalnızca belirli bir alt kümenin oluşturulması önemlidir. Bu, aşağıdakiler kullanılarak elde edilir: o sayfa için uygun çalışanları görüntülemek üzere veri dizisinin bir kısmını çıkaran işlev. Örneğin, 50 çalışan varsa ve kullanıcı sayfa başına 8 öğe görüntülemeyi seçerse, komut dosyası yalnızca 1-8 arası çalışanları sayfa 1'de, 9-16 arası çalışanları sayfa 2'de vb. görüntüler. Bu yaklaşım, kullanıcının verilerde daha küçük parçalar halinde hareket etmesine olanak tanıyarak hem sayfa yükleme sürelerini hem de gezinmeyi iyileştirir.

kendileri JavaScript kullanılarak dinamik olarak oluşturulur. Toplam sayfa sayısı, toplam veri uzunluğuna ve sayfa başına öğe sayısına göre hesaplanır. Bu, aşağıdakiler kullanılarak gerçekleştirilir: Gerektiğinde kalan çalışanların ek bir sayfaya yerleştirilmesini sağlayan işlev. Daha sonra her sayfa düğmesi oluşturulur ve kullanıcıların görüntülemek istedikleri sayfayı seçmelerine olanak sağlanır. Olay dinleyicileri bu düğmelere eklenir, böylece tıklandığında uygun çalışan alt kümesi ekranda görüntülenir.

Sayfalandırmaya ek olarak, komut dosyaları ayrıca aşağıdakilere de izin verir: Ve veri. Kullanıcılar çalışanları ad, soyad veya departmana göre sıralayabilir. Kullanıcı açılır menüden bir seçeneği seçtiğinde veriler seçilen özelliğe göre yeniden sıralanır ve sayfa bu değişiklikleri yansıtacak şekilde yenilenir. Benzer şekilde alfabe filtresi, kullanıcıların bir harfe tıklayarak adları o harfle başlayan çalışanları görüntülemesine olanak tanır. Bu sıralama, filtreleme ve sayfalandırma kombinasyonu, büyük veri kümelerini yönetmek için oldukça dinamik ve kullanıcı dostu bir arayüz oluşturur.

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

İstemci Tarafında Önbelleğe Alma ile Sayfalandırmayı Geliştirme

Sağlanan örnek, sunucu tarafının getirilmesine odaklanırken gerçek zamanlı güncellemeler için bir diğer önemli husus, istemci tarafı önbelleğe alma kullanarak performansı artırmaktır. Bu yöntem, tekrarlanan sunucu isteklerine olan ihtiyacı azaltmak için verilerin bir kısmının istemci tarafında kaydedilmesini içerir. Önbelleğe alma ile veriler AJAX yoluyla alındıktan sonra yerel bellekte veya tarayıcı depolama alanında saklanabilir ve böylece kullanıcılar sayfalar veya filtreler arasında gezinirken daha sonra daha hızlı erişim sağlanır. Bu, sunucu yükünü azaltır ve sayfalandırma sisteminin yanıt verebilirliğini önemli ölçüde artırır.

Önbelleğe almanın uygulanması, veri kümesi büyük olduğunda ve nadiren değiştiğinde özellikle yararlı olabilir. Örneğin, tüm verileri bir kez alabilir, JavaScript değişkenlerini kullanarak yerel olarak saklayabilir veya ve ardından önbelleğe alınan verilerden sayfalara ayırın. Bu strateji daha sorunsuz bir deneyim sağlar çünkü sayfaları değiştirmek veya filtre uygulamak artık yeni sunucu istekleri gerektirmeyecektir. Bunun yerine veriler yerel önbellekten alınır, işlenir ve neredeyse anında oluşturulur.

Ayrıca, önbelleğe alma aşağıdaki gibi diğer dinamik özelliklerle de birleştirilebilir: ve sıralama. Veriler önbelleğe alındıktan sonra, filtreler ve sıralama doğrudan önbelleğe alınan veri kümesine uygulanabilir. Bu şekilde kullanıcılar, sunucudan veri almaya gerek kalmadan çalışanları departmana, isme veya diğer özelliklere göre filtreleyebilir. Önbelleğe almanın uygulanması bant genişliği kullanımını azaltır ve ağ gecikmesinin sorun olduğu durumlarda kusursuz bir tarama deneyimi sağlayarak son derece faydalı olabilir.

1. İstemci tarafı önbelleğe alma, sayfalandırmayla nasıl çalışır?
2. İstemci tarafı önbelleğe alma, verileri ilk getirme işleminden sonra yerel olarak depolayarak çalışır. veya bir JavaScript değişkeni. Bu, verileri sayfalara ayırırken sonraki AJAX çağrılarına olan ihtiyacı ortadan kaldırır.
3. AJAX sayfalamasında istemci tarafı önbelleğe almanın faydaları nelerdir?
4. İstemci tarafı önbelleğe alma, sunucu yükünü azaltarak ve sayfada gezinmeyi daha hızlı hale getirerek performansı artırır. Veriler bir kez alınır ve yerel olarak depolanır; bu, sayfalar arasında geçiş yaparken veya filtre uygularken kullanıcı deneyimini geliştirir.
5. Önbelleğe alınan veriler arama ve sıralama için kullanılabilir mi?
6. Evet, veriler önbelleğe alındıktan sonra şu amaçlarla kullanılabilir: Ve ek sunucu istekleri olmadan yerel olarak. Bu, kullanıcılar için daha hızlı ve daha duyarlı bir arayüz sağlar.
7. Önbelleğe alma, sık sık değişen veri kümeleri için uygun mu?
8. Önbelleğe alma, nadiren değişen veri kümeleri için en etkili yöntemdir. Dinamik veri kümeleri için önbelleğe alma hâlâ kullanılabilir ancak veri tutarlılığını sağlamak için periyodik olarak veya belirli tetikleyicilerle yenilenmesi gerekecektir.
9. Önbelleğe alınmış verileri nasıl temizlersiniz veya güncellersiniz?
10. Önbelleğe alınan veriler, manuel olarak kaldırılarak temizlenebilir veya güncellenebilir. veya yeni bir AJAX isteği yoluyla veri kümesini yenilemek. Örneğin, aramak saklanan tüm verileri temizleyecektir.