Update script.js

script.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', () => {
     const tableBody = document.getElementById('dataTable');
-    const sentimentFilter = document.getElementById('sentimentFilter');
-    const pagination = document.getElementById('pagination');
+    const sentimentFilter = document.getElementById('sentimentAnalysis');
+    const pagination = document.getElementById('customPagination');
     const itemsPerPage = 10;
     let currentPage = 1;
     let dataset = [];
@@ -32,14 +32,37 @@ document.addEventListener('DOMContentLoaded', () => {
                     tableBody.appendChild(row);
                 });
 
+                tableBody.style.opacity = '0';
+                setTimeout(() => {
+                    tableBody.style.opacity = '1';
+                    tableBody.style.transition = 'opacity 0.3s ease';
+                }, 50);
+
                 updatePagination(filteredData.length, page);
             }
 
             function updatePagination(totalItems, page) {
                 pagination.innerHTML = '';
                 const totalPages = Math.ceil(totalItems / itemsPerPage);
+                const maxPagesToShow = 5;
+                let startPage, endPage;
 
-                if (totalPages <= 1) return;
+                if (totalPages <= maxPagesToShow) {
+                    startPage = 1;
+                    endPage = totalPages;
+                } else {
+                    const half = Math.floor(maxPagesToShow / 2);
+                    if (page <= half) {
+                        startPage = 1;
+                        endPage = maxPagesToShow;
+                    } else if (page + half >= totalPages) {
+                        startPage = totalPages - maxPagesToShow + 1;
+                        endPage = totalPages;
+                    } else {
+                        startPage = page - half;
+                        endPage = page + half;
+                    }
+                }
 
                 const prevLi = document.createElement('li');
                 prevLi.className = `page-item ${page === 1 ? 'disabled' : ''}`;
@@ -50,7 +73,25 @@ document.addEventListener('DOMContentLoaded', () => {
                 });
                 pagination.appendChild(prevLi);
 
-                for (let i = 1; i <= totalPages; i++) {
+                if (startPage > 1) {
+                    const firstLi = document.createElement('li');
+                    firstLi.className = 'page-item';
+                    firstLi.innerHTML = '<a class="page-link" href="#">1</a>';
+                    firstLi.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        displayData(sentimentFilter.value, 1);
+                    });
+                    pagination.appendChild(firstLi);
+
+                    if (startPage > 2) {
+                        const dotsLi = document.createElement('li');
+                        dotsLi.className = 'page-item disabled';
+                        dotsLi.innerHTML = '<a class="page-link" href="#">...</a>';
+                        pagination.appendChild(dotsLi);
+                    }
+                }
+
+                for (let i = startPage; i <= endPage; i++) {
                     const li = document.createElement('li');
                     li.className = `page-item ${i === page ? 'active' : ''}`;
                     li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
@@ -61,6 +102,24 @@ document.addEventListener('DOMContentLoaded', () => {
                     pagination.appendChild(li);
                 }
 
+                if (endPage < totalPages) {
+                    if (endPage < totalPages - 1) {
+                        const dotsLi = document.createElement('li');
+                        dotsLi.className = 'page-item disabled';
+                        dotsLi.innerHTML = '<a class="page-link" href="#">...</a>';
+                        pagination.appendChild(dotsLi);
+                    }
+
+                    const lastLi = document.createElement('li');
+                    lastLi.className = 'page-item';
+                    lastLi.innerHTML = `<a class="page-link" href="#">${totalPages}</a>`;
+                    lastLi.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        displayData(sentimentFilter.value, totalPages);
+                    });
+                    pagination.appendChild(lastLi);
+                }
+
                 const nextLi = document.createElement('li');
                 nextLi.className = `page-item ${page === totalPages ? 'disabled' : ''}`;
                 nextLi.innerHTML = '<a class="page-link" href="#">Next</a>';