Sorgu Paneli: Scripti

async function filterAndRender() const params = new URLSearchParams( q: searchInput.value, status: statusFilter.value, role: roleFilter.value ); const response = await fetch(`/api/sorgu?$params`); const data = await response.json(); renderTable(data); updateStats(data);

<div class="table-wrapper"> <table class="data-table" id="resultTable"> <thead> <tr> <th>ID</th><th>Kullanıcı Adı</th><th>E-posta</th><th>Rol</th><th>Durum</th><th>Kayıt Tarihi</th> </tr> </thead> <tbody id="tableBody"> <tr class="no-data"><td colspan="6">Veriler yükleniyor...</td></tr> </tbody> </table> </div> <footer> Sorgu Paneli v2.0 | Örnek veri seti üzerinde çalışır - Gerçek API ile entegre edilebilir. </footer> </div> </div>

.btn-secondary:hover background: #cbd5e1;

.badge background: #e9ecef; padding: 4px 12px; border-radius: 40px; font-size: 0.75rem; font-weight: 500; Sorgu Paneli Scripti

.btn border: none; padding: 10px 24px; border-radius: 40px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 0.85rem; background: #eef2f6; color: #1e2f3e;

.panel-header h1:before content: "🔍"; font-size: 2rem;

/* FILTER AREA */ .filter-area background: #f8fafd; padding: 24px 28px; border-bottom: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; role: roleFilter.value )

.btn-secondary background: #e2e8f0;

/* HEADER */ .panel-header background: #1a2c3e; color: white; padding: 20px 28px; border-bottom: 4px solid #f39c12;

.data-table tr:hover td background-color: #fef9e6; const response = await fetch(`/api/sorgu?$params`)

.button-group display: flex; gap: 12px; flex-wrap: wrap;

footer padding: 16px 28px 24px; font-size: 0.7rem; text-align: right; color: #7f8c8d; border-top: 1px solid #edf2f7; background: white;

.filter-group flex: 2; min-width: 180px;

const filtered = mockData.filter(item => // Arama filtresi (id, username, email) let matchesSearch = true; if (searchTerm !== "") matchesSearch = item.id.toString().includes(searchTerm) // Durum filtresi let matchesStatus = true; if (statusVal !== "all") matchesStatus = item.status === statusVal; // Rol filtresi let matchesRole = true; if (roleVal !== "all") matchesRole = item.role === roleVal; return matchesSearch && matchesStatus && matchesRole; );

Kodu sorgu-paneli.html olarak kaydedip herhangi bir tarayıcıda açabilirsiniz. JavaScript dahil tamamen bağımsız çalışır.