DataTables Nedir? Nasıl Kullanılır ? Örnekleri
DataTables Nedir Ve Nasıl Kullanılır ?
DataTables jQuery ile çalışan bir JS kütüphanesidir ve HTML tablolara filtreleme, sıralama, sayfalama gibi dinamik özellikler sağlar.
PHP ile arama sıralama filtreleme gibi işlemlerin yapılabilmesi için ayrı ayrı kod blokları yazmak gerekir ve bu kodlarda JS kullanmazsak dinamik bir işlem de sağlayamayız.
DataTables kütüphanesi ise bu işlemleri dinamik hızlı ve kolay şekilde düzenlemiştir ve uzun kod bloglarından bizi kurtarmıştır.
Şimdi bir DataTables örneği vererek kolayca bu işlemin nasıl olduğunu anlayalım.
PHP DataTables Örneği
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTables ile Veri Gösterimi</title>
<!-- DataTables CSS ve jQuery -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<body>
<h2>Kullanıcı Listesi</h2>
<table id="users" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $user): ?>
<tr>
<td><?php echo $user['ID']; ?></td>
<td><?php echo htmlspecialchars($user['Name']); ?></td>
<td><?php echo htmlspecialchars($user['Email']); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#users').DataTable();
});
</script>
</body>
</html>
Burada <table id="users" class="display"> id olarak users ismini verdik ve aşağıda da döngü işlemi yapıp verilerimizi listelettik
<script>
$(document).ready(function() {
$('#users').DataTable();
});
</script>
diğer script kodumuza da users ismini belirterek DataTables tetiklemesini gerçekleştirdik.
E-Bültenime Abone Ol
Anahtar Kelimeler: DataTables Kullanımı, Php DataTables
Yazan: Emre TENİK
Bu yazı: 108 kez okundu
