Update script.js

script.js

@@ -1,35 +1,80 @@
 document.addEventListener('DOMContentLoaded', () => {
     const tableBody = document.getElementById('dataTable');
     const sentimentFilter = document.getElementById('sentimentFilter');
+    const pagination = document.getElementById('pagination');
+    const itemsPerPage = 10;
+    let currentPage = 1;
+    let dataset = [];
 
     fetch('data.csv')
         .then(response => response.text())
         .then(data => {
             const rows = data.trim().split('\n').slice(1);
-            const dataset = rows.map(row => {
+            dataset = rows.map(row => {
                 const [index, text, label] = row.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
                 return { index: parseInt(index), text: text.replace(/^"|"$/g, ''), label: label.replace(/^"|"$/g, '') };
             });
 
-            function displayData(filter = 'all') {
+            function displayData(filter = 'all', page = 1) {
                 tableBody.innerHTML = '';
-                dataset.forEach(item => {
-                    if (filter === 'all' || item.label === filter) {
-                        const row = document.createElement('tr');
-                        row.innerHTML = `
-                            <td>${item.index}</td>
-                            <td>${item.text}</td>
-                            <td>${item.label}</td>
-                        `;
-                        tableBody.appendChild(row);
-                    }
+                const filteredData = filter === 'all' ? dataset : dataset.filter(item => item.label === filter);
+                const start = (page - 1) * itemsPerPage;
+                const end = start + itemsPerPage;
+                const paginatedData = filteredData.slice(start, end);
+
+                paginatedData.forEach(item => {
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td>${item.index}</td>
+                        <td>${item.text}</td>
+                        <td>${item.label}</td>
+                    `;
+                    tableBody.appendChild(row);
+                });
+
+                updatePagination(filteredData.length, page);
+            }
+
+            function updatePagination(totalItems, page) {
+                pagination.innerHTML = '';
+                const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+                if (totalPages <= 1) return;
+
+                const prevLi = document.createElement('li');
+                prevLi.className = `page-item ${page === 1 ? 'disabled' : ''}`;
+                prevLi.innerHTML = '<a class="page-link" href="#">Previous</a>';
+                prevLi.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    if (page > 1) displayData(sentimentFilter.value, page - 1);
+                });
+                pagination.appendChild(prevLi);
+
+                for (let i = 1; i <= totalPages; i++) {
+                    const li = document.createElement('li');
+                    li.className = `page-item ${i === page ? 'active' : ''}`;
+                    li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
+                    li.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        displayData(sentimentFilter.value, i);
+                    });
+                    pagination.appendChild(li);
+                }
+
+                const nextLi = document.createElement('li');
+                nextLi.className = `page-item ${page === totalPages ? 'disabled' : ''}`;
+                nextLi.innerHTML = '<a class="page-link" href="#">Next</a>';
+                nextLi.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    if (page < totalPages) displayData(sentimentFilter.value, page + 1);
                 });
+                pagination.appendChild(nextLi);
             }
 
             displayData();
 
             sentimentFilter.addEventListener('change', () => {
-                displayData(sentimentFilter.value);
+                displayData(sentimentFilter.value, 1);
             });
         })
         .catch(error => {