ஜாவாஸ்கிரிப்ட்/jQuery உடன் டைனமிக் அஜாக்ஸ் டேட்டாவிற்கான பேஜினேஷனை செயல்படுத்துதல்

அஜாக்ஸ் தரவுக்கான டைனமிக் பேஜினேஷன்

இணைய பயன்பாடுகளில், பெரிய தரவுத்தொகுப்புகளை திறமையாக கையாள்வது பயனர் அனுபவத்தை மேம்படுத்துவதற்கு முக்கியமானது. AJAX கோரிக்கைகள் மூலம் பெறப்பட்ட தரவைக் காண்பிக்கும் போது, ​​பயனர் இடைமுகத்தை சுத்தமாகவும் நிர்வகிக்கக்கூடியதாகவும் வைத்திருக்க பேஜினேஷன் சிறந்த தீர்வாகும். தரவை சிறிய பகுதிகளாகப் பிரிப்பதன் மூலம், பக்கத்தை அதிக உள்ளடக்கம் கொண்ட பக்கத்தை அதிகப்படுத்தாமல், பயனர்கள் பட்டியலை சிரமமின்றி நகர்த்துவதற்கு பேஜினேஷன் அனுமதிக்கிறது.

ஜாவாஸ்கிரிப்ட் மற்றும் jQuery பேஜினேஷனை செயல்படுத்துவதற்கான சக்திவாய்ந்த கருவிகளை வழங்குகின்றன, குறிப்பாக AJAX ஐப் பயன்படுத்தி சேவையகத்திலிருந்து தரவு மாறும் வகையில் மீட்டெடுக்கப்படும் போது. இந்த தொழில்நுட்பங்கள், பயனர் தொடர்புகளின் அடிப்படையில், ஒவ்வொரு பக்கத்திலும் உள்ள தரவுகளின் துணைக்குழுவை மட்டும் காட்டுவதன் மூலம் பெரிய தரவுத்தொகுப்புகளை நிர்வகிக்க டெவலப்பர்களை அனுமதிக்கின்றன.

வரிசைப்படுத்துதல், வடிகட்டுதல் மற்றும் தேடல் செயல்பாடுகளை ஒருங்கிணைப்பது பயனர் அனுபவத்தை மேலும் மேம்படுத்துகிறது. பெயர்கள் அல்லது துறைகள் போன்ற பண்புகளின் அடிப்படையில் தரவை வரிசைப்படுத்துதல், வகைகளின்படி வடிகட்டுதல் மற்றும் உலகளாவிய தேடலை இயக்குதல் ஆகியவை பெரிய தரவுத்தொகுப்புகளின் அணுகலை மேம்படுத்துவதற்கு அவசியம். பேஜினேஷனுடன் இணைந்து, இந்த நுட்பங்கள் உகந்த தரவு நிர்வாகத்தை உறுதி செய்கின்றன.

இந்த வழிகாட்டியில், JavaScript/jQuery ஐப் பயன்படுத்தி மாறும் வகையில் பெறப்பட்ட தரவுத்தொகுப்பில் எவ்வாறு பேஜினேஷனைச் செயல்படுத்துவது என்பதை ஆராய்வோம், தரவுக் காட்சியை மிகவும் திறமையாகக் கட்டுப்படுத்துவதற்கான தீர்வை உங்களுக்கு வழங்குகிறது. வடிப்பான்களை ஒருங்கிணைத்தல், வரிசைப்படுத்துதல் மற்றும் பிழைகளைக் கையாளுதல், பெரிய தரவுத்தொகுப்புகளை நிர்வகிப்பதற்கான விரிவான அணுகுமுறையை வழங்குதல் போன்ற சாத்தியமான சிக்கல்களையும் நாங்கள் விவாதிப்போம்.

கட்டளை	பயன்பாட்டின் உதாரணம்
slice()	var paginatedData = data.slice(start, end);இந்த கட்டளை ஒரு வரிசையின் ஒரு பகுதியை பிரித்தெடுக்க பயன்படுகிறது. இந்த எடுத்துக்காட்டில், தற்போதைய பக்கத்தில் காண்பிக்க பணியாளர்களின் துணைக்குழுவைத் தேர்ந்தெடுப்பதன் மூலம் தரவை பக்கமாக்குவது பயன்படுத்தப்படுகிறது.
Math.ceil()	var totalPages = Math.ceil(totalItems / itemsPerPage);இது ஒரு எண்ணை அருகில் உள்ள முழு எண்ணாகச் சுற்றுகிறது. ஒரு பக்கத்திற்கான உருப்படிகளின் அடிப்படையில் அனைத்து தரவையும் உள்ளடக்குவதற்குத் தேவையான பக்கங்களின் சரியான எண்ணிக்கையைத் தீர்மானிக்க பேஜினேஷனுக்கு இது மிகவும் முக்கியமானது.
innerHTML	container.innerHTML = '';இந்த கட்டளை ஒரு தனிமத்தின் HTML உள்ளடக்கத்தை நேரடியாக கையாளுகிறது. தேர்ந்தெடுக்கப்பட்ட பக்கத்திற்கான புதிய பணியாளர்களின் தொகுப்பை வழங்குவதற்கு முன் பணியாளர் கொள்கலனை அழிக்க இது பயன்படுத்தப்படுகிறது.
appendChild()	கொள்கலன். appendChild(அட்டை);இந்த கட்டளை ஒரு புதிய உறுப்பு (அட்டை) ஒரு கொள்கலனில் சேர்க்க பயன்படுகிறது. இது தற்போதைய பக்கத்திற்கான பணியாளர் அட்டைகளை மாறும் வகையில் உருவாக்கும் மற்றும் காண்பிக்கும் செயல்முறையின் ஒரு பகுதியாகும்.
addEventListener()	pageBtn.addEventListener('கிளிக்', செயல்பாடு() {...});இந்த கட்டளை ஒரு உறுப்பு மீது ஒரு குறிப்பிட்ட நிகழ்வை (எ.கா. ஒரு கிளிக்) கேட்கிறது. இங்கே, பேஜினேஷன் பொத்தான்கள் பயனர் கிளிக்குகளுக்கு எதிர்வினையாற்ற அனுமதிக்கிறது, இது பக்க ரெண்டரிங்கைத் தூண்டுகிறது.
forEach()	paginatedData.forEach(செயல்பாடு(பணியாளர்) {...});இந்த கட்டளை ஊழியர்களின் வரிசையை மீண்டும் மீண்டும் செய்கிறது, ஒவ்வொரு உறுப்புக்கும் ஒரு செயல்பாட்டை செயல்படுத்துகிறது. ஒவ்வொரு பணியாளரின் சுயவிவரத்தையும் பேஜினேட் தரவுகளில் வழங்குவதற்கு இது இன்றியமையாதது.
fetch()	பெறு('./assets/employeeDirectory.json')பெறுதல் கட்டளையானது ஒத்திசைவற்ற முறையில் தரவை மீட்டெடுக்க HTTP கோரிக்கையைத் தொடங்குகிறது. இங்கே, அஜாக்ஸ் வழியாக JSON கோப்பிலிருந்து பணியாளர் தரவை ஏற்ற இது பயன்படுகிறது.
on()	$('#pagination li').on('click', function() {...});இந்த jQuery கட்டளை நிகழ்வு ஹேண்ட்லர்களை உறுப்புகளுடன் இணைக்கிறது. இந்த எடுத்துக்காட்டில், பயனர் வெவ்வேறு பக்க எண்களைக் கிளிக் செய்து தொடர்புடைய தரவை ஏற்ற அனுமதிப்பதன் மூலம் பேஜினேஷனைச் செயல்படுத்துகிறது.

JavaScript/jQuery இல் AJAX உடன் பேஜினேஷனைப் புரிந்துகொள்வது மற்றும் வரிசைப்படுத்துவது

மேலே கொடுக்கப்பட்டுள்ள ஸ்கிரிப்ட்கள், பெரிய தரவுத்தொகுப்புகளைப் பயன்படுத்துவதன் மூலம் திறமையாகக் காண்பிப்பதில் உள்ள சிக்கலைத் தீர்ப்பதை நோக்கமாகக் கொண்டுள்ளன மற்றும் டைனமிக் தரவு பெறுதல் . முக்கிய கருத்து JSON கோப்பிலிருந்து பணியாளர்களின் பட்டியலை மீட்டெடுப்பது மற்றும் தரவை நிர்வகிக்கக்கூடிய பிரிவுகளாகப் பிரிப்பது, பயனர்கள் பக்கத்தை அதிகப்படுத்தாமல் அவர்கள் வழியாக செல்ல அனுமதிக்கிறது. AJAX இந்தத் தரவை ஒத்திசைவின்றிப் பெறப் பயன்படுகிறது, வெவ்வேறு தரவின் பக்கங்களுக்கு இடையில் மாறும்போது முழுப் பக்கத்தையும் மீண்டும் ஏற்ற வேண்டிய அவசியத்தைத் தடுக்கிறது. செயல்திறன் மற்றும் பயனர் அனுபவத்தை பராமரிக்க இது முக்கியமானது.

தரவு பெறப்பட்டதும், தற்போதைய பக்கத்தின் அடிப்படையில் ஒரு குறிப்பிட்ட துணைக்குழுவை மட்டும் வழங்குவது அவசியம். பயன்படுத்துவதன் மூலம் இது அடையப்படுகிறது செயல்பாடு, அந்த பக்கத்திற்கு பொருத்தமான பணியாளர்களைக் காண்பிக்க தரவு வரிசையின் ஒரு பகுதியை பிரித்தெடுக்கிறது. உதாரணமாக, 50 பணியாளர்கள் இருந்தால், ஒரு பக்கத்திற்கு 8 உருப்படிகளைப் பார்க்க பயனர் தேர்வுசெய்தால், ஸ்கிரிப்ட் 1-8 பக்கம் 1, 9-16 பக்கம் 2 மற்றும் பலவற்றில் பணியாளர்களைக் காண்பிக்கும். இந்த அணுகுமுறை பயனரை சிறிய துணுக்குகளில் தரவை நகர்த்த அனுமதிக்கிறது, பக்க சுமை நேரங்கள் மற்றும் வழிசெலுத்தல் இரண்டையும் மேம்படுத்துகிறது.

தி ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி தாங்களே மாறும் வகையில் உருவாக்கப்படுகின்றன. மொத்த தரவு நீளம் மற்றும் ஒரு பக்கத்திற்கான உருப்படிகளின் அடிப்படையில் மொத்த பக்கங்களின் எண்ணிக்கை கணக்கிடப்படுகிறது. இதைப் பயன்படுத்தி கையாளப்படுகிறது செயல்பாடு, தேவைப்பட்டால் மீதமுள்ள பணியாளர்கள் கூடுதல் பக்கத்தில் வைக்கப்படுவதை உறுதி செய்கிறது. ஒவ்வொரு பக்க பொத்தானும் பின்னர் ரெண்டர் செய்யப்பட்டு, பயனர்கள் எந்தப் பக்கத்தைப் பார்க்க வேண்டும் என்பதைத் தேர்ந்தெடுக்க அனுமதிக்கிறது. நிகழ்வு கேட்போர் இந்த பொத்தான்களுடன் இணைக்கப்பட்டுள்ளனர், எனவே கிளிக் செய்யும் போது, ​​பணியாளர்களின் பொருத்தமான துணைக்குழு திரையில் காட்டப்படும்.

பேஜினேஷனைத் தவிர, ஸ்கிரிப்ட்களும் அனுமதிக்கின்றன மற்றும் தரவு. பயனர்கள் முதல் பெயர், கடைசி பெயர் அல்லது துறை மூலம் பணியாளர்களை வரிசைப்படுத்தலாம். கீழ்தோன்றும் மெனுவிலிருந்து பயனர் ஒரு விருப்பத்தைத் தேர்ந்தெடுக்கும்போது, ​​தேர்ந்தெடுக்கப்பட்ட பண்புக்கூறின் அடிப்படையில் தரவு மறுவரிசைப்படுத்தப்படும், மேலும் இந்த மாற்றங்களைப் பிரதிபலிக்கும் வகையில் பக்கம் புதுப்பிக்கப்படும். இதேபோல், எழுத்துக்கள் வடிப்பான் பயனர்கள் ஒரு கடிதத்தின் மீது கிளிக் செய்து அந்த எழுத்தில் பெயர்கள் தொடங்கும் ஊழியர்களைப் பார்க்க அனுமதிக்கிறது. வரிசைப்படுத்துதல், வடிகட்டுதல் மற்றும் பக்கமாக்கல் ஆகியவற்றின் இந்த கலவையானது பெரிய தரவுத்தொகுப்புகளை நிர்வகிப்பதற்கான மிகவும் ஆற்றல்மிக்க மற்றும் பயனர் நட்பு இடைமுகத்தை உருவாக்குகிறது.

// 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 மூலம் தரவு பெறப்பட்டவுடன், அது உள்ளூர் நினைவகம் அல்லது உலாவி சேமிப்பகத்தில் சேமிக்கப்படும், பயனர்கள் பக்கங்கள் அல்லது வடிப்பான்களுக்கு இடையில் செல்லும்போது விரைவான அணுகலை அனுமதிக்கிறது. இது சர்வர் சுமையை குறைக்கிறது மற்றும் பேஜினேஷன் அமைப்பின் வினைத்திறனை கணிசமாக மேம்படுத்துகிறது.

தரவுத்தொகுப்பு பெரியதாகவும் எப்போதாவது மாறும்போதும் தேக்ககத்தை செயல்படுத்துவது மிகவும் பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, நீங்கள் எல்லா தரவையும் ஒரு முறை பெறலாம், ஜாவாஸ்கிரிப்ட் மாறிகளைப் பயன்படுத்தி உள்நாட்டில் சேமிக்கலாம் அல்லது , பின்னர் தேக்ககப்படுத்தப்பட்ட தரவிலிருந்து பக்கத்தை உருவாக்கவும். பக்கங்களை மாற்றுவது அல்லது வடிப்பான்களைப் பயன்படுத்துவதால் புதிய சேவையகக் கோரிக்கைகள் இனி தேவைப்படாது என்பதால் இந்த உத்தி மென்மையான அனுபவத்தை வழங்குகிறது. அதற்கு பதிலாக, தரவு உள்ளூர் தற்காலிக சேமிப்பிலிருந்து மீட்டெடுக்கப்பட்டு, செயலாக்கப்பட்டு, கிட்டத்தட்ட உடனடியாக வழங்கப்படுகின்றன.

மேலும், கேச்சிங் மற்ற டைனமிக் அம்சங்களுடன் இணைக்கப்படலாம் மற்றும் வரிசைப்படுத்துதல். தரவு தேக்ககப்படுத்தப்பட்டவுடன், வடிப்பான்கள் மற்றும் வரிசையாக்கம் ஆகியவை தற்காலிக சேமிப்பு தரவுத்தொகுப்பில் நேரடியாகப் பயன்படுத்தப்படும். இந்த வழியில், சேவையகத்திலிருந்து தரவை மீண்டும் பெற வேண்டிய அவசியமின்றி பயனர்கள் துறை, பெயர் அல்லது பிற பண்புக்கூறுகளின் அடிப்படையில் பணியாளர்களை வடிகட்டலாம். கேச்சிங்கைச் செயல்படுத்துவது அலைவரிசை பயன்பாட்டைக் குறைக்கிறது மற்றும் பிணைய தாமதம் ஒரு கவலையாக இருக்கும் சந்தர்ப்பங்களில் மிகவும் பயனுள்ளதாக இருக்கும், இது தடையற்ற உலாவல் அனுபவத்தை வழங்குகிறது.

1. பேஜினேஷனுடன் கிளையன்ட் பக்க கேச்சிங் எப்படி வேலை செய்கிறது?
2. க்ளையண்ட் பக்க கேச்சிங், முதலில் பயன்படுத்திய பிறகு உள்ளூரில் தரவைச் சேமிப்பதன் மூலம் செயல்படுகிறது அல்லது ஜாவாஸ்கிரிப்ட் மாறி. தரவு மூலம் பேஜினேட் செய்யும் போது அடுத்தடுத்த அஜாக்ஸ் அழைப்புகளின் தேவையை இது நீக்குகிறது.
3. அஜாக்ஸ் பேஜினேஷனில் கிளையன்ட் பக்க கேச்சிங்கின் நன்மைகள் என்ன?
4. கிளையண்ட் பக்க கேச்சிங் சேவையக சுமையை குறைப்பதன் மூலம் செயல்திறனை மேம்படுத்துகிறது மற்றும் பக்க வழிசெலுத்தலை வேகமாக செய்கிறது. தரவு ஒருமுறை பெறப்பட்டு உள்நாட்டில் சேமிக்கப்படும், இது பக்கங்களுக்கு இடையில் மாறும்போது அல்லது வடிப்பான்களைப் பயன்படுத்தும்போது பயனர் அனுபவத்தை மேம்படுத்துகிறது.
5. தேடுவதற்கும் வரிசைப்படுத்துவதற்கும் தேக்ககப்படுத்தப்பட்ட தரவைப் பயன்படுத்த முடியுமா?
6. ஆம், தரவு தேக்ககப்படுத்தப்பட்டவுடன், அதைப் பயன்படுத்தலாம் மற்றும் கூடுதல் சேவையக கோரிக்கைகள் இல்லாமல் உள்நாட்டில். இது பயனர்களுக்கு வேகமான மற்றும் மிகவும் பதிலளிக்கக்கூடிய இடைமுகத்தை உருவாக்குகிறது.
7. டேட்டாசெட்களை அடிக்கடி மாற்ற கேச்சிங் பொருத்தமானதா?
8. எப்போதாவது மாறும் தரவுத்தொகுப்புகளுக்கு கேச்சிங் மிகவும் பயனுள்ளதாக இருக்கும். டைனமிக் தரவுத்தொகுப்புகளுக்கு, கேச்சிங் இன்னும் பயன்படுத்தப்படலாம், ஆனால் தரவு நிலைத்தன்மையை உறுதிப்படுத்த அவ்வப்போது அல்லது குறிப்பிட்ட தூண்டுதல்களில் புதுப்பிக்கப்பட வேண்டும்.
9. தற்காலிக சேமிப்பில் உள்ள தரவை எவ்வாறு அழிப்பது அல்லது புதுப்பிப்பது?
10. தேக்ககப்படுத்தப்பட்ட தரவை கைமுறையாக அகற்றுவதன் மூலம் அழிக்கலாம் அல்லது புதுப்பிக்கலாம் அல்லது புதிய AJAX கோரிக்கை மூலம் தரவுத்தொகுப்பைப் புதுப்பிக்கவும். உதாரணமாக, அழைப்பு சேமிக்கப்பட்ட எல்லா தரவையும் அழிக்கும்.