JavaScript/jQuery ಜೊತೆಗೆ ಡೈನಾಮಿಕ್ AJAX ಡೇಟಾಗಾಗಿ ವಿನ್ಯಾಸವನ್ನು ಅಳವಡಿಸಲಾಗುತ್ತಿದೆ

AJAX ಡೇಟಾಗಾಗಿ ಡೈನಾಮಿಕ್ ಪೇಜಿನೇಶನ್

ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸುವುದು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ. AJAX ವಿನಂತಿಗಳ ಮೂಲಕ ಪಡೆದ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಂದಾಗ, ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ನಿರ್ವಹಿಸುವಂತೆ ಇರಿಸಿಕೊಳ್ಳಲು ವಿನ್ಯಾಸವು ಅತ್ಯುತ್ತಮ ಪರಿಹಾರಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಡೇಟಾವನ್ನು ಸಣ್ಣ ಭಾಗಗಳಾಗಿ ವಿಭಜಿಸುವ ಮೂಲಕ, ಪುಟವು ಹೆಚ್ಚಿನ ವಿಷಯದೊಂದಿಗೆ ಪುಟವನ್ನು ಅಗಾಧಗೊಳಿಸದೆ ಪಟ್ಟಿಯ ಮೂಲಕ ಸಲೀಸಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಬಳಕೆದಾರರನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ವಿನ್ಯಾಸವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು JavaScript ಮತ್ತು jQuery ಶಕ್ತಿಯುತ ಸಾಧನಗಳನ್ನು ನೀಡುತ್ತವೆ, ವಿಶೇಷವಾಗಿ AJAX ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸರ್ವರ್‌ನಿಂದ ಡೇಟಾವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಹಿಂಪಡೆಯುತ್ತಿರುವಾಗ. ಈ ತಂತ್ರಜ್ಞಾನಗಳು ಬಳಕೆದಾರರ ಪರಸ್ಪರ ಕ್ರಿಯೆಯ ಆಧಾರದ ಮೇಲೆ ಪ್ರತಿ ಪುಟದಲ್ಲಿ ಡೇಟಾದ ಉಪವಿಭಾಗವನ್ನು ಮಾತ್ರ ತೋರಿಸುವ ಮೂಲಕ ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.

ವಿಂಗಡಣೆ, ಫಿಲ್ಟರಿಂಗ್ ಮತ್ತು ಹುಡುಕಾಟ ಕಾರ್ಯಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಮತ್ತಷ್ಟು ಉತ್ಕೃಷ್ಟಗೊಳಿಸುತ್ತದೆ. ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳ ಪ್ರವೇಶವನ್ನು ಸುಧಾರಿಸಲು ಹೆಸರುಗಳು ಅಥವಾ ವಿಭಾಗಗಳಂತಹ ಗುಣಲಕ್ಷಣಗಳ ಆಧಾರದ ಮೇಲೆ ಡೇಟಾವನ್ನು ವಿಂಗಡಿಸುವುದು, ವರ್ಗಗಳ ಮೂಲಕ ಫಿಲ್ಟರ್ ಮಾಡುವುದು ಮತ್ತು ಜಾಗತಿಕ ಹುಡುಕಾಟವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಅತ್ಯಗತ್ಯ. ವಿನ್ಯಾಸದೊಂದಿಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟ ಈ ತಂತ್ರಗಳು ಅತ್ಯುತ್ತಮವಾದ ಡೇಟಾ ನಿರ್ವಹಣೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತವೆ.

ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, JavaScript/jQuery ಬಳಸಿಕೊಂಡು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಪಡೆದ ಡೇಟಾಸೆಟ್‌ನಲ್ಲಿ ವಿನ್ಯಾಸವನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, ಡೇಟಾ ಪ್ರದರ್ಶನವನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿಯಂತ್ರಿಸಲು ನಿಮಗೆ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು, ವಿಂಗಡಣೆ ಮತ್ತು ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು, ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸಮಗ್ರ ವಿಧಾನವನ್ನು ನೀಡುವಂತಹ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ನಾವು ಚರ್ಚಿಸುತ್ತೇವೆ.

ಆಜ್ಞೆ	ಬಳಕೆಯ ಉದಾಹರಣೆ
slice()	var ಪುಟದ ಡೇಟಾ = ಡೇಟಾ.ಸ್ಲೈಸ್ (ಪ್ರಾರಂಭ, ಅಂತ್ಯ);ರಚನೆಯ ವಿಭಾಗವನ್ನು ಹೊರತೆಗೆಯಲು ಈ ಆಜ್ಞೆಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪ್ರಸ್ತುತ ಪುಟದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಉದ್ಯೋಗಿಗಳ ಉಪವಿಭಾಗವನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ಮೂಲಕ ಡೇಟಾವನ್ನು ಪುಟೀಕರಿಸಲು ಇದನ್ನು ಬಳಸಿಕೊಳ್ಳಲಾಗುತ್ತದೆ.
Math.ceil()	var ಒಟ್ಟು ಪುಟಗಳು = Math.ceil (ಒಟ್ಟು ಐಟಂಗಳು / ಐಟಂಗಳುPerPage);ಇದು ಹತ್ತಿರದ ಪೂರ್ಣಾಂಕದವರೆಗೆ ಸಂಖ್ಯೆಯನ್ನು ಪೂರ್ತಿಗೊಳಿಸುತ್ತದೆ. ಪ್ರತಿ ಪುಟದ ಐಟಂಗಳ ಆಧಾರದ ಮೇಲೆ ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ಸರಿಹೊಂದಿಸಲು ಅಗತ್ಯವಿರುವ ಪುಟಗಳ ನಿಖರವಾದ ಸಂಖ್ಯೆಯನ್ನು ನಿರ್ಧರಿಸಲು ಪುಟ ವಿನ್ಯಾಸಕ್ಕೆ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
innerHTML	container.innerHTML = '';ಈ ಆಜ್ಞೆಯು ಅಂಶದ HTML ವಿಷಯವನ್ನು ನೇರವಾಗಿ ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುತ್ತದೆ. ಆಯ್ಕೆಮಾಡಿದ ಪುಟಕ್ಕೆ ಹೊಸ ಉದ್ಯೋಗಿಗಳನ್ನು ಸಲ್ಲಿಸುವ ಮೊದಲು ಉದ್ಯೋಗಿ ಧಾರಕವನ್ನು ತೆರವುಗೊಳಿಸಲು ಇದನ್ನು ಇಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ.
appendChild()	ಧಾರಕ. appendChild(ಕಾರ್ಡ್);ಕಂಟೇನರ್‌ಗೆ ಹೊಸ ಅಂಶವನ್ನು (ಕಾರ್ಡ್) ಸೇರಿಸಲು ಈ ಆಜ್ಞೆಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಪ್ರಸ್ತುತ ಪುಟಕ್ಕಾಗಿ ಉದ್ಯೋಗಿ ಕಾರ್ಡ್‌ಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಉತ್ಪಾದಿಸುವ ಮತ್ತು ಪ್ರದರ್ಶಿಸುವ ಪ್ರಕ್ರಿಯೆಯ ಭಾಗವಾಗಿದೆ.
addEventListener()	pageBtn.addEventListener('ಕ್ಲಿಕ್', ಫಂಕ್ಷನ್() {...});ಈ ಆಜ್ಞೆಯು ಅಂಶದ ಮೇಲೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಘಟನೆಯನ್ನು (ಉದಾಹರಣೆಗೆ, ಒಂದು ಕ್ಲಿಕ್) ಆಲಿಸುತ್ತದೆ. ಇಲ್ಲಿ, ಇದು ಬಳಕೆದಾರರ ಕ್ಲಿಕ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ವಿನ್ಯಾಸ ಬಟನ್‌ಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ, ಪುಟ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
forEach()	paginatedData.forEach(ಕಾರ್ಯ(ಉದ್ಯೋಗಿ) {...});ಈ ಆಜ್ಞೆಯು ಉದ್ಯೋಗಿಗಳ ರಚನೆಯ ಮೇಲೆ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ, ಪ್ರತಿ ಅಂಶದ ಮೇಲೆ ಕಾರ್ಯವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಪುಟದ ಡೇಟಾದಲ್ಲಿ ಪ್ರತಿ ಉದ್ಯೋಗಿಯ ಪ್ರೊಫೈಲ್ ಅನ್ನು ನಿರೂಪಿಸಲು ಇದು ಅತ್ಯಗತ್ಯ.
fetch()	ಪಡೆದುಕೊಳ್ಳಿ('./assets/employeeDirectory.json')ಡೇಟಾವನ್ನು ಅಸಮಕಾಲಿಕವಾಗಿ ಹಿಂಪಡೆಯಲು Fetch ಆಜ್ಞೆಯು HTTP ವಿನಂತಿಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಇಲ್ಲಿ, AJAX ಮೂಲಕ JSON ಫೈಲ್‌ನಿಂದ ಉದ್ಯೋಗಿ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
on()	$('#pagination 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 ಮೂಲಕ ಡೇಟಾವನ್ನು ಒಮ್ಮೆ ಪಡೆದುಕೊಂಡರೆ, ಅದನ್ನು ಸ್ಥಳೀಯ ಮೆಮೊರಿ ಅಥವಾ ಬ್ರೌಸರ್ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದು, ಬಳಕೆದಾರರು ಪುಟಗಳು ಅಥವಾ ಫಿಲ್ಟರ್‌ಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ ನಂತರದ ವೇಗದ ಪ್ರವೇಶವನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಸರ್ವರ್ ಲೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.

ಡೇಟಾಸೆಟ್ ದೊಡ್ಡದಾಗಿದ್ದರೆ ಮತ್ತು ಅಪರೂಪವಾಗಿ ಬದಲಾದಾಗ ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುವಿಕೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ಒಮ್ಮೆ ಪಡೆಯಬಹುದು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಥಳೀಯವಾಗಿ ಸಂಗ್ರಹಿಸಬಹುದು ಅಥವಾ , ತದನಂತರ ಅದನ್ನು ಸಂಗ್ರಹಿಸಿದ ಡೇಟಾದಿಂದ ಪುಟ ಮಾಡಿ. ಈ ತಂತ್ರವು ಸುಗಮ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಪುಟಗಳನ್ನು ಬದಲಾಯಿಸುವುದು ಅಥವಾ ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದರಿಂದ ಇನ್ನು ಮುಂದೆ ಹೊಸ ಸರ್ವರ್ ವಿನಂತಿಗಳ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಸ್ಥಳೀಯ ಸಂಗ್ರಹದಿಂದ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯಲಾಗುತ್ತದೆ, ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಬಹುತೇಕ ತಕ್ಷಣವೇ ಸಲ್ಲಿಸಲಾಗುತ್ತದೆ.

ಇದಲ್ಲದೆ, ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುವಿಕೆಯನ್ನು ಇತರ ಡೈನಾಮಿಕ್ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು ಮತ್ತು ವಿಂಗಡಣೆ. ಒಮ್ಮೆ ಡೇಟಾವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿದ ನಂತರ, ಫಿಲ್ಟರ್‌ಗಳು ಮತ್ತು ವಿಂಗಡಣೆಯನ್ನು ನೇರವಾಗಿ ಸಂಗ್ರಹಿಸಿದ ಡೇಟಾಸೆಟ್‌ಗೆ ಅನ್ವಯಿಸಬಹುದು. ಈ ರೀತಿಯಾಗಿ, ಸರ್ವರ್‌ನಿಂದ ಡೇಟಾವನ್ನು ಮರು-ಪಡೆಯುವ ಅಗತ್ಯವಿಲ್ಲದೇ ಬಳಕೆದಾರರು ಇಲಾಖೆ, ಹೆಸರು ಅಥವಾ ಇತರ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ನೌಕರರನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಬಹುದು. ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುವಿಕೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದರಿಂದ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿ ಕಾಳಜಿಯ ಸಂದರ್ಭಗಳಲ್ಲಿ ಹೆಚ್ಚು ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ, ಇದು ತಡೆರಹಿತ ಬ್ರೌಸಿಂಗ್ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.

1. ವಿನ್ಯಾಸದೊಂದಿಗೆ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕ್ಯಾಶಿಂಗ್ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ?
2. ಮೊದಲ ಬಳಸಿದ ನಂತರ ಸ್ಥಳೀಯವಾಗಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವ ಮೂಲಕ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕ್ಯಾಶಿಂಗ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೇರಿಯಬಲ್. ಡೇಟಾದ ಮೂಲಕ ಪುಟವನ್ನು ರಚಿಸುವಾಗ ಇದು ನಂತರದ AJAX ಕರೆಗಳ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ.
3. AJAX ವಿನ್ಯಾಸದಲ್ಲಿ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕ್ಯಾಶಿಂಗ್‌ನ ಪ್ರಯೋಜನಗಳು ಯಾವುವು?
4. ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕ್ಯಾಶಿಂಗ್ ಸರ್ವರ್ ಲೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಪುಟ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ವೇಗವಾಗಿ ಮಾಡುವ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಡೇಟಾವನ್ನು ಒಮ್ಮೆ ಪಡೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಸ್ಥಳೀಯವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ, ಇದು ಪುಟಗಳ ನಡುವೆ ಬದಲಾಯಿಸುವಾಗ ಅಥವಾ ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವಾಗ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
5. ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ಹುಡುಕಲು ಮತ್ತು ವಿಂಗಡಿಸಲು ಬಳಸಬಹುದೇ?
6. ಹೌದು, ಒಮ್ಮೆ ಡೇಟಾವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿದ ನಂತರ, ಅದನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಹೆಚ್ಚುವರಿ ಸರ್ವರ್ ವಿನಂತಿಗಳಿಲ್ಲದೆ ಸ್ಥಳೀಯವಾಗಿ. ಇದು ಬಳಕೆದಾರರಿಗೆ ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ಇಂಟರ್‌ಫೇಸ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
7. ಡೇಟಾಸೆಟ್‌ಗಳನ್ನು ಪದೇ ಪದೇ ಬದಲಾಯಿಸಲು ಕ್ಯಾಶಿಂಗ್ ಸೂಕ್ತವೇ?
8. ವಿರಳವಾಗಿ ಬದಲಾಗುವ ಡೇಟಾಸೆಟ್‌ಗಳಿಗೆ ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುವುದು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ. ಡೈನಾಮಿಕ್ ಡೇಟಾಸೆಟ್‌ಗಳಿಗಾಗಿ, ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಇನ್ನೂ ಬಳಸಬಹುದು ಆದರೆ ಡೇಟಾ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಯತಕಾಲಿಕವಾಗಿ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಟ್ರಿಗ್ಗರ್‌ಗಳಲ್ಲಿ ರಿಫ್ರೆಶ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ.
9. ಸಂಗ್ರಹಿಸಿದ ಡೇಟಾವನ್ನು ನೀವು ಹೇಗೆ ತೆರವುಗೊಳಿಸುತ್ತೀರಿ ಅಥವಾ ನವೀಕರಿಸುತ್ತೀರಿ?
10. ಕ್ಯಾಶ್ ಮಾಡಲಾದ ಡೇಟಾವನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ತೆರವುಗೊಳಿಸಬಹುದು ಅಥವಾ ನವೀಕರಿಸಬಹುದು ಅಥವಾ ಹೊಸ AJAX ವಿನಂತಿಯ ಮೂಲಕ ಡೇಟಾಸೆಟ್ ಅನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡುವುದು. ಉದಾಹರಣೆಗೆ, ಕರೆ ಮಾಡುವುದು ಸಂಗ್ರಹಿಸಿದ ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ.