JavaScript/jQuery ਦੇ ਨਾਲ ਡਾਇਨਾਮਿਕ AJAX ਡੇਟਾ ਲਈ ਪੰਨਾਬੰਦੀ ਨੂੰ ਲਾਗੂ ਕਰਨਾ

AJAX ਡੇਟਾ ਲਈ ਗਤੀਸ਼ੀਲ ਪੰਨਾਬੰਦੀ

ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ, ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਣ ਲਈ ਵੱਡੇ ਡੇਟਾਸੈਟਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸੰਭਾਲਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਜਦੋਂ AJAX ਬੇਨਤੀਆਂ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ, ਤਾਂ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਨੂੰ ਸਾਫ਼ ਅਤੇ ਪ੍ਰਬੰਧਨਯੋਗ ਰੱਖਣ ਲਈ ਪੰਨਾਬੰਦੀ ਸਭ ਤੋਂ ਵਧੀਆ ਹੱਲਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। ਡੇਟਾ ਨੂੰ ਛੋਟੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡ ਕੇ, ਪੇਜਿਨੇਸ਼ਨ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਮੱਗਰੀ ਵਾਲੇ ਪੰਨੇ ਨੂੰ ਹਾਵੀ ਕੀਤੇ ਬਿਨਾਂ ਸੂਚੀ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ।

JavaScript ਅਤੇ jQuery ਪੰਨਾਬੰਦੀ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਪੇਸ਼ ਕਰਦੇ ਹਨ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ AJAX ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਰਵਰ ਤੋਂ ਡਾਟਾ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ। ਇਹ ਤਕਨਾਲੋਜੀਆਂ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨ ਦੇ ਆਧਾਰ 'ਤੇ, ਹਰੇਕ ਪੰਨੇ 'ਤੇ ਡੇਟਾ ਦਾ ਸਿਰਫ਼ ਇੱਕ ਉਪ ਸਮੂਹ ਦਿਖਾ ਕੇ ਵੱਡੇ ਡੇਟਾਸੈਟਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀਆਂ ਹਨ।

ਛਾਂਟੀ, ਫਿਲਟਰਿੰਗ ਅਤੇ ਖੋਜ ਕਾਰਜਕੁਸ਼ਲਤਾਵਾਂ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਨਾ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਹੋਰ ਅਮੀਰ ਬਣਾਉਂਦਾ ਹੈ। ਨਾਮ ਜਾਂ ਵਿਭਾਗਾਂ ਵਰਗੇ ਗੁਣਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਡੇਟਾ ਨੂੰ ਛਾਂਟਣਾ, ਸ਼੍ਰੇਣੀਆਂ ਦੁਆਰਾ ਫਿਲਟਰ ਕਰਨਾ, ਅਤੇ ਗਲੋਬਲ ਖੋਜ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣਾ ਵੱਡੇ ਡੇਟਾਸੈਟਾਂ ਦੀ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹਨ। ਪੰਨਾਬੰਦੀ ਦੇ ਨਾਲ ਮਿਲਾ ਕੇ, ਇਹ ਤਕਨੀਕਾਂ ਅਨੁਕੂਲ ਡਾਟਾ ਪ੍ਰਬੰਧਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੀਆਂ ਹਨ।

ਇਸ ਗਾਈਡ ਵਿੱਚ, ਅਸੀਂ ਖੋਜ ਕਰਾਂਗੇ ਕਿ JavaScript/jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪ੍ਰਾਪਤ ਕੀਤੇ ਡੇਟਾਸੈੱਟ 'ਤੇ ਪੰਨਾਬੰਦੀ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ, ਤੁਹਾਨੂੰ ਡਾਟਾ ਡਿਸਪਲੇ ਨੂੰ ਵਧੇਰੇ ਕੁਸ਼ਲਤਾ ਨਾਲ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਇੱਕ ਹੱਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਅਸੀਂ ਸੰਭਾਵੀ ਮੁੱਦਿਆਂ 'ਤੇ ਵੀ ਚਰਚਾ ਕਰਾਂਗੇ, ਜਿਵੇਂ ਕਿ ਫਿਲਟਰਾਂ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਨਾ, ਛਾਂਟਣਾ, ਅਤੇ ਗਲਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣਾ, ਵੱਡੇ ਡੇਟਾਸੈਟਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਵਿਆਪਕ ਪਹੁੰਚ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਨਾ।

ਹੁਕਮ	ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ
slice()	var paginatedData = data.slice(ਸ਼ੁਰੂ, ਅੰਤ);ਇਹ ਕਮਾਂਡ ਐਰੇ ਦੇ ਭਾਗ ਨੂੰ ਐਕਸਟਰੈਕਟ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਮੌਜੂਦਾ ਪੰਨੇ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਕਰਮਚਾਰੀਆਂ ਦੇ ਇੱਕ ਉਪ ਸਮੂਹ ਦੀ ਚੋਣ ਕਰਕੇ ਡੇਟਾ ਨੂੰ ਪੰਨਾ ਲਗਾਉਣ ਲਈ ਲਗਾਇਆ ਜਾਂਦਾ ਹੈ।
Math.ceil()	var totalPages = Math.ceil(totalItems / itemsPerPage);ਇਹ ਕਿਸੇ ਸੰਖਿਆ ਨੂੰ ਨਜ਼ਦੀਕੀ ਪੂਰਨ ਅੰਕ ਤੱਕ ਗੋਲ ਕਰਦਾ ਹੈ। ਪ੍ਰਤੀ ਪੰਨੇ ਆਈਟਮਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਸਾਰੇ ਡੇਟਾ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਲੋੜੀਂਦੇ ਪੰਨਿਆਂ ਦੀ ਸਹੀ ਸੰਖਿਆ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਪੰਨਾਬੰਦੀ ਲਈ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ।
innerHTML	container.innerHTML = '';ਇਹ ਕਮਾਂਡ ਕਿਸੇ ਤੱਤ ਦੀ HTML ਸਮੱਗਰੀ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਹੇਰਾਫੇਰੀ ਕਰਦੀ ਹੈ। ਇੱਥੇ ਚੁਣੇ ਗਏ ਪੰਨੇ ਲਈ ਕਰਮਚਾਰੀਆਂ ਦੇ ਨਵੇਂ ਸੈੱਟ ਨੂੰ ਪੇਸ਼ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕਰਮਚਾਰੀ ਕੰਟੇਨਰ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
appendChild()	container.appendChild(ਕਾਰਡ);ਇਹ ਕਮਾਂਡ ਇੱਕ ਕੰਟੇਨਰ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਤੱਤ (ਕਾਰਡ) ਜੋੜਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਮੌਜੂਦਾ ਪੰਨੇ ਲਈ ਕਰਮਚਾਰੀ ਕਾਰਡਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਬਣਾਉਣ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਦਾ ਹਿੱਸਾ ਹੈ।
addEventListener()	pageBtn.addEventListener('ਕਲਿੱਕ', ਫੰਕਸ਼ਨ() {...});ਇਹ ਕਮਾਂਡ ਕਿਸੇ ਤੱਤ 'ਤੇ ਇੱਕ ਨਿਸ਼ਚਿਤ ਘਟਨਾ (ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਕਲਿੱਕ) ਲਈ ਸੁਣਦੀ ਹੈ। ਇੱਥੇ, ਇਹ ਪੇਜਿਨੇਸ਼ਨ ਬਟਨਾਂ ਨੂੰ ਉਪਭੋਗਤਾ ਕਲਿੱਕਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਪੇਜ ਰੈਂਡਰਿੰਗ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ।
forEach()	paginatedData.forEach(ਫੰਕਸ਼ਨ(ਕਰਮਚਾਰੀ) {...});ਇਹ ਕਮਾਂਡ ਕਰਮਚਾਰੀਆਂ ਦੀ ਲੜੀ ਉੱਤੇ ਦੁਹਰਾਉਂਦੀ ਹੈ, ਹਰੇਕ ਤੱਤ ਉੱਤੇ ਇੱਕ ਫੰਕਸ਼ਨ ਚਲਾਉਂਦੀ ਹੈ। ਪੰਨਾਬੱਧ ਡੇਟਾ ਵਿੱਚ ਹਰੇਕ ਕਰਮਚਾਰੀ ਦੇ ਪ੍ਰੋਫਾਈਲ ਨੂੰ ਪੇਸ਼ ਕਰਨ ਲਈ ਇਹ ਜ਼ਰੂਰੀ ਹੈ।
fetch()	ਪ੍ਰਾਪਤ ਕਰੋ('./assets/employeeDirectory.json')fetch ਕਮਾਂਡ ਅਸਿੰਕਰੋਨਸ ਤੌਰ 'ਤੇ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਇੱਕ HTTP ਬੇਨਤੀ ਸ਼ੁਰੂ ਕਰਦੀ ਹੈ। ਇੱਥੇ, ਇਹ AJAX ਦੁਆਰਾ JSON ਫਾਈਲ ਤੋਂ ਕਰਮਚਾਰੀ ਡੇਟਾ ਨੂੰ ਲੋਡ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
on()	$('#ਪੇਜਿਨੇਸ਼ਨ li').on('ਕਲਿੱਕ', ਫੰਕਸ਼ਨ() {...});ਇਹ jQuery ਕਮਾਂਡ ਈਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਤੱਤਾਂ ਨਾਲ ਜੋੜਦੀ ਹੈ। ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਇਹ ਯੂਜ਼ਰ ਨੂੰ ਵੱਖ-ਵੱਖ ਪੰਨਾ ਨੰਬਰਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਅਤੇ ਸੰਬੰਧਿਤ ਡੇਟਾ ਨੂੰ ਲੋਡ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇ ਕੇ ਪੰਨਾਬੰਦੀ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।

JavaScript/jQuery ਵਿੱਚ AJAX ਨਾਲ ਪੰਨਾਬੰਦੀ ਅਤੇ ਛਾਂਟੀ ਨੂੰ ਸਮਝਣਾ

ਉਪਰੋਕਤ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਦਾ ਉਦੇਸ਼ ਵੱਡੇ ਡੇਟਾਸੈਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੁਸ਼ਲਤਾ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨਾ ਹੈ ਅਤੇ ਨਾਲ ਗਤੀਸ਼ੀਲ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ . ਮੁੱਖ ਸੰਕਲਪ ਇੱਕ JSON ਫਾਈਲ ਤੋਂ ਕਰਮਚਾਰੀਆਂ ਦੀ ਸੂਚੀ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਡੇਟਾ ਨੂੰ ਪ੍ਰਬੰਧਨਯੋਗ ਭਾਗਾਂ ਵਿੱਚ ਵੰਡਣ ਦੇ ਆਲੇ ਦੁਆਲੇ ਘੁੰਮਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪੰਨੇ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ ਬਿਨਾਂ ਉਹਨਾਂ ਦੁਆਰਾ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਮਿਲਦੀ ਹੈ। AJAX ਦੀ ਵਰਤੋਂ ਅਸਿੰਕਰੋਨਸ ਤੌਰ 'ਤੇ ਇਸ ਡੇਟਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਡੇਟਾ ਦੇ ਵੱਖ-ਵੱਖ ਪੰਨਿਆਂ ਵਿਚਕਾਰ ਸਵਿਚ ਕਰਨ ਵੇਲੇ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਮੁੜ ਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ।

ਇੱਕ ਵਾਰ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕੀਤੇ ਜਾਣ ਤੋਂ ਬਾਅਦ, ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਆਧਾਰ 'ਤੇ ਸਿਰਫ਼ ਇੱਕ ਖਾਸ ਸਬਸੈੱਟ ਨੂੰ ਰੈਂਡਰ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਹ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਫੰਕਸ਼ਨ, ਜੋ ਉਸ ਪੰਨੇ ਲਈ ਢੁਕਵੇਂ ਕਰਮਚਾਰੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਡੇਟਾ ਐਰੇ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਕੱਢਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਇੱਥੇ 50 ਕਰਮਚਾਰੀ ਹਨ ਅਤੇ ਉਪਭੋਗਤਾ ਪ੍ਰਤੀ ਪੰਨਾ 8 ਆਈਟਮਾਂ ਨੂੰ ਦੇਖਣ ਲਈ ਚੁਣਦਾ ਹੈ, ਤਾਂ ਸਕ੍ਰਿਪਟ ਪੰਨਾ 1 'ਤੇ ਸਿਰਫ 1-8, ਪੰਨਾ 2 'ਤੇ 9-16, ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਕਰਮਚਾਰੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ। ਇਹ ਪਹੁੰਚ ਉਪਭੋਗਤਾ ਨੂੰ ਪੇਜ ਲੋਡ ਕਰਨ ਦੇ ਸਮੇਂ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਦੋਵਾਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹੋਏ, ਛੋਟੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਡੇਟਾ ਦੁਆਰਾ ਜਾਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ।

ਦ ਆਪਣੇ ਆਪ ਨੂੰ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਤਿਆਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਪੰਨਿਆਂ ਦੀ ਕੁੱਲ ਸੰਖਿਆ ਦੀ ਕੁੱਲ ਡਾਟਾ ਲੰਬਾਈ ਅਤੇ ਪ੍ਰਤੀ ਪੰਨਾ ਆਈਟਮਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਵਰਤ ਕੇ ਸੰਭਾਲਿਆ ਗਿਆ ਹੈ ਫੰਕਸ਼ਨ, ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਜੇਕਰ ਲੋੜ ਹੋਵੇ ਤਾਂ ਕਿਸੇ ਵੀ ਬਾਕੀ ਕਰਮਚਾਰੀ ਨੂੰ ਇੱਕ ਵਾਧੂ ਪੰਨੇ 'ਤੇ ਰੱਖਿਆ ਗਿਆ ਹੈ। ਹਰੇਕ ਪੰਨੇ ਦਾ ਬਟਨ ਫਿਰ ਰੈਂਡਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਉਪਭੋਗਤਾ ਇਹ ਚੁਣ ਸਕਦੇ ਹਨ ਕਿ ਉਹ ਕਿਹੜਾ ਪੰਨਾ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹਨ। ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ ਇਹਨਾਂ ਬਟਨਾਂ ਨਾਲ ਜੁੜੇ ਹੋਏ ਹਨ, ਇਸ ਲਈ ਜਦੋਂ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਕਰਮਚਾਰੀਆਂ ਦਾ ਉਚਿਤ ਉਪ ਸਮੂਹ ਸਕ੍ਰੀਨ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ।

ਪੰਨਾਬੰਦੀ ਤੋਂ ਇਲਾਵਾ, ਸਕ੍ਰਿਪਟਾਂ ਵੀ ਇਸਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀਆਂ ਹਨ ਅਤੇ ਡਾਟਾ ਦਾ. ਉਪਭੋਗਤਾ ਪਹਿਲੇ ਨਾਮ, ਆਖਰੀ ਨਾਮ ਜਾਂ ਵਿਭਾਗ ਦੁਆਰਾ ਕਰਮਚਾਰੀਆਂ ਨੂੰ ਛਾਂਟ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਉਪਭੋਗਤਾ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚੋਂ ਇੱਕ ਵਿਕਲਪ ਚੁਣਦਾ ਹੈ, ਤਾਂ ਚੁਣੇ ਗਏ ਗੁਣਾਂ ਦੇ ਅਧਾਰ ਤੇ ਡੇਟਾ ਨੂੰ ਮੁੜ ਕ੍ਰਮਬੱਧ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਹਨਾਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਪੰਨੇ ਨੂੰ ਤਾਜ਼ਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸੇ ਤਰ੍ਹਾਂ, ਵਰਣਮਾਲਾ ਫਿਲਟਰ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਉਹਨਾਂ ਕਰਮਚਾਰੀਆਂ ਨੂੰ ਵੇਖਣ ਲਈ ਇੱਕ ਅੱਖਰ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਦੇ ਨਾਮ ਉਸ ਅੱਖਰ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਛਾਂਟੀ, ਫਿਲਟਰਿੰਗ, ਅਤੇ ਪੰਨਾਬੰਦੀ ਦਾ ਇਹ ਸੁਮੇਲ ਵੱਡੇ ਡੇਟਾਸੇਟਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਉੱਚ ਗਤੀਸ਼ੀਲ ਅਤੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦਾ ਹੈ।

// 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. ਕਲਾਇੰਟ-ਸਾਈਡ ਕੈਚਿੰਗ ਪਹਿਲੀ ਵਾਰ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਬਾਅਦ ਡਾਟਾ ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਸਟੋਰ ਕਰਕੇ ਕੰਮ ਕਰਦੀ ਹੈ ਜਾਂ ਇੱਕ JavaScript ਵੇਰੀਏਬਲ। ਇਹ ਡੇਟਾ ਦੁਆਰਾ ਪੰਨਾ ਬਣਾਉਣ ਵੇਲੇ ਬਾਅਦ ਦੀਆਂ AJAX ਕਾਲਾਂ ਦੀ ਜ਼ਰੂਰਤ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।
3. AJAX ਪੰਨਾਬੰਦੀ ਵਿੱਚ ਕਲਾਇੰਟ-ਸਾਈਡ ਕੈਚਿੰਗ ਦੇ ਕੀ ਫਾਇਦੇ ਹਨ?
4. ਕਲਾਇੰਟ-ਸਾਈਡ ਕੈਚਿੰਗ ਸਰਵਰ ਲੋਡ ਨੂੰ ਘਟਾ ਕੇ ਅਤੇ ਪੇਜ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਤੇਜ਼ ਕਰਕੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ। ਡੇਟਾ ਇੱਕ ਵਾਰ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਸਟੋਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਪੰਨਿਆਂ ਦੇ ਵਿਚਕਾਰ ਸਵਿਚ ਕਰਨ ਜਾਂ ਫਿਲਟਰ ਲਾਗੂ ਕਰਨ ਵੇਲੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ।
5. ਕੀ ਕੈਸ਼ਡ ਡੇਟਾ ਨੂੰ ਖੋਜ ਅਤੇ ਛਾਂਟਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ?
6. ਹਾਂ, ਇੱਕ ਵਾਰ ਡੇਟਾ ਕੈਸ਼ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਇਸਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ ਅਤੇ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਵਾਧੂ ਸਰਵਰ ਬੇਨਤੀਆਂ ਤੋਂ ਬਿਨਾਂ। ਇਸ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਤੇਜ਼ ਅਤੇ ਵਧੇਰੇ ਜਵਾਬਦੇਹ ਇੰਟਰਫੇਸ ਹੁੰਦਾ ਹੈ।
7. ਕੀ ਕੈਚਿੰਗ ਡਾਟਾਸੈਟਾਂ ਨੂੰ ਅਕਸਰ ਬਦਲਣ ਲਈ ਢੁਕਵਾਂ ਹੈ?
8. ਕਦੇ-ਕਦਾਈਂ ਬਦਲਣ ਵਾਲੇ ਡੇਟਾਸੇਟਾਂ ਲਈ ਕੈਚਿੰਗ ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੁੰਦੀ ਹੈ। ਡਾਇਨਾਮਿਕ ਡਾਟਾਸੈਟਾਂ ਲਈ, ਕੈਚਿੰਗ ਦੀ ਵਰਤੋਂ ਅਜੇ ਵੀ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ ਪਰ ਡਾਟਾ ਇਕਸਾਰਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਸਮੇਂ-ਸਮੇਂ 'ਤੇ ਜਾਂ ਖਾਸ ਟਰਿਗਰਾਂ 'ਤੇ ਤਾਜ਼ਾ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।
9. ਤੁਸੀਂ ਕੈਸ਼ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਕਿਵੇਂ ਸਾਫ਼ ਜਾਂ ਅਪਡੇਟ ਕਰਦੇ ਹੋ?
10. ਕੈਸ਼ਡ ਡੇਟਾ ਨੂੰ ਹੱਥੀਂ ਹਟਾ ਕੇ ਕਲੀਅਰ ਜਾਂ ਅਪਡੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜਾਂ ਨਵੀਂ AJAX ਬੇਨਤੀ ਰਾਹੀਂ ਡੇਟਾਸੈਟ ਨੂੰ ਤਾਜ਼ਾ ਕਰਨਾ। ਉਦਾਹਰਨ ਲਈ, ਕਾਲ ਕਰਨਾ ਸਾਰੇ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਸਾਫ਼ ਕਰ ਦੇਵੇਗਾ।