Triển khai phân trang cho dữ liệu AJAX động bằng JavaScript/jQuery

Phân trang động cho dữ liệu AJAX

Trong các ứng dụng web, việc xử lý các tập dữ liệu lớn một cách hiệu quả là rất quan trọng để nâng cao trải nghiệm người dùng. Khi nói đến việc hiển thị dữ liệu được tìm nạp thông qua các yêu cầu AJAX, phân trang là một trong những giải pháp tốt nhất để giữ cho giao diện người dùng sạch sẽ và dễ quản lý. Bằng cách chia dữ liệu thành các phần nhỏ hơn, phân trang cho phép người dùng điều hướng qua danh sách một cách dễ dàng mà không làm trang có quá nhiều nội dung bị choáng ngợp.

JavaScript và jQuery cung cấp các công cụ mạnh mẽ để triển khai phân trang, đặc biệt khi dữ liệu được truy xuất động từ máy chủ bằng AJAX. Những công nghệ này cho phép nhà phát triển quản lý các tập dữ liệu lớn bằng cách chỉ hiển thị một tập hợp con dữ liệu trên mỗi trang, dựa trên sự tương tác của người dùng.

Việc tích hợp các chức năng sắp xếp, lọc và tìm kiếm sẽ làm phong phú thêm trải nghiệm của người dùng. Sắp xếp dữ liệu dựa trên các thuộc tính như tên hoặc phòng ban, lọc theo danh mục và bật tìm kiếm toàn cầu là điều cần thiết để cải thiện khả năng truy cập của các bộ dữ liệu lớn. Kết hợp với phân trang, các kỹ thuật này đảm bảo quản lý dữ liệu tối ưu.

Trong hướng dẫn này, chúng ta sẽ khám phá cách triển khai phân trang trên tập dữ liệu được tìm nạp động bằng JavaScript/jQuery, cung cấp cho bạn giải pháp kiểm soát việc hiển thị dữ liệu hiệu quả hơn. Chúng tôi cũng sẽ thảo luận về các vấn đề tiềm ẩn, chẳng hạn như tích hợp bộ lọc, sắp xếp và xử lý lỗi, đưa ra cách tiếp cận toàn diện để quản lý các tập dữ liệu lớn.

Yêu cầu	Ví dụ về sử dụng
slice()	var paginatedData = data.slice(start, end);Lệnh này được sử dụng để trích xuất một phần của mảng. Trong ví dụ này, nó được sử dụng để phân trang dữ liệu bằng cách chọn một tập hợp con nhân viên để hiển thị trên trang hiện tại.
Math.ceil()	var TotalPages = Math.ceil(totalItems / itemsPerPage);Nó làm tròn một số lên đến số nguyên gần nhất. Điều này rất quan trọng để phân trang xác định chính xác số trang cần thiết để chứa tất cả dữ liệu dựa trên các mục trên mỗi trang.
innerHTML	container.innerHTML = '';Lệnh này trực tiếp thao tác nội dung HTML của một phần tử. Nó được sử dụng ở đây để xóa vùng chứa nhân viên trước khi hiển thị nhóm nhân viên mới cho trang đã chọn.
appendChild()	container.appendChild(thẻ);Lệnh này được sử dụng để nối thêm một phần tử (thẻ) mới vào vùng chứa. Đó là một phần của quá trình tạo và hiển thị động thẻ nhân viên cho trang hiện tại.
addEventListener()	pageBtn.addEventListener('click', function() {...});Lệnh này lắng nghe một sự kiện được chỉ định (ví dụ: một cú nhấp chuột) trên một phần tử. Ở đây, nó cho phép các nút phân trang phản ứng với các nhấp chuột của người dùng, kích hoạt hiển thị trang.
forEach()	paginatedData.forEach(function(nhân viên) {...});Lệnh này lặp lại mảng nhân viên, thực thi một hàm trên từng phần tử. Điều quan trọng là hiển thị hồ sơ của từng nhân viên trong dữ liệu được phân trang.
fetch()	tìm nạp('./assets/employeeDirectory.json')Lệnh tìm nạp khởi tạo một yêu cầu HTTP để truy xuất dữ liệu không đồng bộ. Ở đây, nó được sử dụng để tải dữ liệu nhân viên từ tệp JSON thông qua AJAX.
on()	$('#pagination li').on('click', function() {...});Lệnh jQuery này gắn các trình xử lý sự kiện vào các phần tử. Trong ví dụ này, nó cho phép phân trang bằng cách cho phép người dùng nhấp vào các số trang khác nhau và tải dữ liệu tương ứng.

Tìm hiểu về phân trang và sắp xếp bằng AJAX trong JavaScript/jQuery

Các tập lệnh được cung cấp ở trên nhằm giải quyết vấn đề hiển thị các tập dữ liệu lớn một cách hiệu quả bằng cách sử dụng và tìm nạp dữ liệu động với . Khái niệm cốt lõi xoay quanh việc truy xuất danh sách nhân viên từ tệp JSON và chia dữ liệu thành các phần có thể quản lý được, cho phép người dùng điều hướng qua chúng mà không làm trang bị choáng ngợp. AJAX được sử dụng để tìm nạp dữ liệu này một cách không đồng bộ, ngăn chặn nhu cầu tải lại toàn bộ trang khi chuyển đổi giữa các trang dữ liệu khác nhau. Điều này rất quan trọng để duy trì hiệu suất và trải nghiệm người dùng.

Sau khi dữ liệu được tìm nạp, điều cần thiết là chỉ hiển thị một tập hợp con cụ thể dựa trên trang hiện tại. Điều này đạt được bằng cách sử dụng hàm trích xuất một phần của mảng dữ liệu để hiển thị các nhân viên phù hợp cho trang đó. Ví dụ: nếu có 50 nhân viên và người dùng chọn xem 8 mục trên mỗi trang, tập lệnh sẽ chỉ hiển thị nhân viên 1-8 trên trang 1, 9-16 trên trang 2, v.v. Cách tiếp cận này cho phép người dùng di chuyển qua dữ liệu theo từng phần nhỏ hơn, cải thiện cả thời gian tải trang và điều hướng.

các chúng được tạo động bằng cách sử dụng JavaScript. Tổng số trang được tính dựa trên tổng độ dài dữ liệu và các mục trên mỗi trang. Việc này được xử lý bằng cách sử dụng chức năng này đảm bảo rằng mọi nhân viên còn lại sẽ được đặt trên một trang bổ sung nếu cần thiết. Sau đó, mỗi nút trang sẽ được hiển thị, cho phép người dùng chọn trang họ muốn xem. Trình xử lý sự kiện được gắn vào các nút này nên khi nhấp vào, tập hợp con nhân viên thích hợp sẽ được hiển thị trên màn hình.

Ngoài việc phân trang, các tập lệnh còn cho phép Và của dữ liệu. Người dùng có thể sắp xếp nhân viên theo họ, tên hoặc bộ phận. Khi người dùng chọn một tùy chọn từ menu thả xuống, dữ liệu sẽ được sắp xếp lại dựa trên thuộc tính đã chọn và trang sẽ được làm mới để phản ánh những thay đổi này. Tương tự, bộ lọc bảng chữ cái cho phép người dùng click vào một chữ cái để xem những nhân viên có tên bắt đầu bằng chữ cái đó. Sự kết hợp giữa sắp xếp, lọc và phân trang này tạo ra một giao diện rất năng động và thân thiện với người dùng để quản lý các tập dữ liệu lớn.

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

Tăng cường phân trang với bộ nhớ đệm phía máy khách

Mặc dù ví dụ được cung cấp tập trung vào việc tìm nạp phía máy chủ thông qua đối với các bản cập nhật theo thời gian thực, một khía cạnh quan trọng khác là nâng cao hiệu suất bằng cách sử dụng bộ nhớ đệm phía máy khách. Phương pháp này liên quan đến việc lưu một phần dữ liệu ở phía máy khách để giảm nhu cầu lặp lại các yêu cầu máy chủ. Với bộ nhớ đệm, khi dữ liệu được tìm nạp qua AJAX, dữ liệu có thể được lưu trữ trong bộ nhớ cục bộ hoặc bộ lưu trữ của trình duyệt, cho phép truy cập tiếp theo nhanh hơn khi người dùng điều hướng giữa các trang hoặc bộ lọc. Điều này làm giảm tải máy chủ và cải thiện đáng kể khả năng đáp ứng của hệ thống phân trang.

Việc triển khai bộ nhớ đệm có thể đặc biệt hữu ích khi tập dữ liệu lớn và thay đổi không thường xuyên. Ví dụ: bạn có thể tìm nạp tất cả dữ liệu một lần, lưu trữ cục bộ bằng cách sử dụng các biến JavaScript hoặc , sau đó phân trang nó từ dữ liệu được lưu trong bộ nhớ đệm. Chiến lược này mang lại trải nghiệm mượt mà hơn vì việc chuyển trang hoặc áp dụng bộ lọc sẽ không còn yêu cầu yêu cầu máy chủ mới nữa. Thay vào đó, dữ liệu được lấy từ bộ đệm cục bộ, được xử lý và hiển thị gần như ngay lập tức.

Hơn nữa, bộ nhớ đệm cũng có thể được kết hợp với các tính năng động khác như và sắp xếp. Sau khi dữ liệu được lưu vào bộ đệm, các bộ lọc và sắp xếp có thể được áp dụng trực tiếp vào tập dữ liệu được lưu trong bộ nhớ đệm. Bằng cách này, người dùng có thể lọc nhân viên theo bộ phận, tên hoặc các thuộc tính khác mà không cần tìm nạp lại dữ liệu từ máy chủ. Việc triển khai bộ nhớ đệm giúp giảm mức sử dụng băng thông và có thể mang lại nhiều lợi ích trong trường hợp độ trễ mạng là vấn đề đáng lo ngại, mang lại trải nghiệm duyệt web liền mạch.

1. Bộ nhớ đệm phía máy khách hoạt động như thế nào với tính năng phân trang?
2. Bộ nhớ đệm phía máy khách hoạt động bằng cách lưu trữ dữ liệu cục bộ sau lần tìm nạp đầu tiên bằng cách sử dụng hoặc một biến JavaScript. Điều này giúp loại bỏ sự cần thiết phải thực hiện các lệnh gọi AJAX tiếp theo khi phân trang dữ liệu.
3. Lợi ích của bộ nhớ đệm phía máy khách trong phân trang AJAX là gì?
4. Bộ nhớ đệm phía máy khách cải thiện hiệu suất bằng cách giảm tải máy chủ và giúp điều hướng trang nhanh hơn. Dữ liệu được tìm nạp một lần và được lưu trữ cục bộ, giúp nâng cao trải nghiệm người dùng khi chuyển đổi giữa các trang hoặc áp dụng bộ lọc.
5. Dữ liệu được lưu trong bộ nhớ đệm có thể được sử dụng để tìm kiếm và sắp xếp không?
6. Có, sau khi dữ liệu được lưu vào bộ nhớ đệm, nó có thể được sử dụng cho Và cục bộ mà không cần yêu cầu máy chủ bổ sung. Điều này dẫn đến giao diện nhanh hơn và phản hồi nhanh hơn cho người dùng.
7. Bộ nhớ đệm có phù hợp với các tập dữ liệu thay đổi thường xuyên không?
8. Bộ nhớ đệm có hiệu quả nhất đối với các tập dữ liệu ít thay đổi. Đối với các tập dữ liệu động, bộ nhớ đệm vẫn có thể được sử dụng nhưng sẽ cần được làm mới định kỳ hoặc theo các trình kích hoạt cụ thể để đảm bảo tính nhất quán của dữ liệu.
9. Làm cách nào để xóa hoặc cập nhật dữ liệu được lưu trong bộ nhớ đệm?
10. Dữ liệu được lưu trong bộ nhớ đệm có thể được xóa hoặc cập nhật bằng cách xóa thủ công khỏi hoặc làm mới tập dữ liệu thông qua yêu cầu AJAX mới. Ví dụ, gọi sẽ xóa tất cả dữ liệu được lưu trữ.