geliştirme

assets/css/custom.css

@@ -53,3 +53,17 @@ h1, h2, h3, h4, h5, h6 {
 .action-icon:hover {
     color: #0d6efd;
 }
+
+.sortable-header {
+    cursor: pointer;
+    user-select: none;
+}
+
+.sortable-header:hover {
+    background-color: rgba(0,0,0,0.05);
+}
+
+.sortable-header .bi {
+    font-size: 0.8em;
+    margin-left: 4px;
+}

assets/js/main.js

@@ -1,8 +1,56 @@
-// Future JavaScript for interactivity will go here.
 document.addEventListener('DOMContentLoaded', function () {
-    // Example: Add tooltips to action icons
+    // Initialize tooltips
     const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
     const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
         return new bootstrap.Tooltip(tooltipTriggerEl)
     });
-});
+
+    // Live search functionality
+    const searchInput = document.getElementById('searchInput');
+    const tableBody = document.getElementById('contactTableBody');
+    const tableRows = tableBody.getElementsByTagName('tr');
+
+    searchInput.addEventListener('keyup', function() {
+        const filter = searchInput.value.toLowerCase();
+        for (let i = 0; i < tableRows.length; i++) {
+            const row = tableRows[i];
+            const cells = row.getElementsByTagName('td');
+            let text = '';
+            for (let j = 0; j < cells.length; j++) {
+                const cell = cells[j];
+                if (cell) {
+                    text += cell.textContent || cell.innerText;
+                }
+            }
+            if (text.toLowerCase().indexOf(filter) > -1) {
+                row.style.display = "";
+            } else {
+                row.style.display = "none";
+            }
+        }
+    });
+
+    // Table sorting functionality
+    const headers = document.querySelectorAll('.sortable-header');
+    headers.forEach(header => {
+        header.addEventListener('click', function() {
+            const table = this.closest('table');
+            const tbody = table.querySelector('tbody');
+            const columnIndex = parseInt(this.getAttribute('data-column-index'));
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+
+            // Simple A-Z string sort
+            const sortedRows = rows.sort((a, b) => {
+                const aColText = a.querySelector(`td:nth-child(${columnIndex + 1})`).textContent.trim();
+                const bColText = b.querySelector(`td:nth-child(${columnIndex + 1})`).textContent.trim();
+                return aColText.localeCompare(bColText);
+            });
+
+            // Re-append sorted rows
+            while (tbody.firstChild) {
+                tbody.removeChild(tbody.firstChild);
+            }
+            tbody.append(...sortedRows);
+        });
+    });
+});

index.php

@@ -102,7 +102,7 @@ $contacts = [
                 <div class="col-md-6">
                     <div class="input-group">
                         <span class="input-group-text"><i class="bi bi-search"></i></span>
-                        <input type="text" class="form-control" placeholder="Search contacts...">
+                        <input type="text" id="searchInput" class="form-control" placeholder="Search contacts...">
                     </div>
                 </div>
             </div>
@@ -111,17 +111,17 @@ $contacts = [
                 <table class="table table-striped table-hover align-middle">
                     <thead class="thead-light">
                         <tr>
-                            <th>Cust. Code</th>
+                            <th class="sortable-header" data-column-index="0">Cust. Code <i class="bi bi-arrow-down-up"></i></th>
-                            <th>Ticari Unvan</th>
+                            <th class="sortable-header" data-column-index="1">Ticari Unvan <i class="bi bi-arrow-down-up"></i></th>
-                            <th>Şehir</th>
+                            <th class="sortable-header" data-column-index="2">Şehir <i class="bi bi-arrow-down-up"></i></th>
-                            <th>Ad Soyad</th>
+                            <th class="sortable-header" data-column-index="3">Ad Soyad <i class="bi bi-arrow-down-up"></i></th>
-                            <th>Telefon</th>
+                            <th class="sortable-header" data-column-index="4">Telefon <i class="bi bi-arrow-down-up"></i></th>
-                            <th>E-posta</th>
+                            <th class="sortable-header" data-column-index="5">E-posta <i class="bi bi-arrow-down-up"></i></th>
-                            <th>Grup</th>
+                            <th class="sortable-header" data-column-index="6">Grup <i class="bi bi-arrow-down-up"></i></th>
                             <th class="text-end">Actions</th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody id="contactTableBody">
                         <?php foreach ($contacts as $contact): ?>
                         <tr>
                             <td><?php echo htmlspecialchars($contact['Cust.Code']); ?></td>