jQuery DataTable nedir?
jQuery DataTable eklentisi ile sayfa yenileme işlemi olmadan tablolarda sayfalama, sıralama ve arama işlemlerini yapabiliriz.
Biz bu dersimizde eklentinin "server-side" özelliği ile jquery ajax ve php kullanarak verilerimizi hızlı bir şekilde tabloda göstereceğiz. Bu özelliği kullanmadan direk olarak verileri ekrana yazdırıp listeletirsek çok fazla veri olduğu zaman sayfamız yavaşlayabilir. Artık kod yazmaya başlayabiliriz. 
Kurulumu
İlk olarak eklentinin kendi sitesine giderek eklentiyi indirelim.(Siteye gitmek için tıklayın). İndirme sayfasından kendinize göre ayarlayıp en alttan "Download" bölümüne tıklayıp "download files" butonuna tıklıyoruz. İndirme işlemi bittikten sonra dosyalarımızı çalışacağımız klasöre atalım. Şimdi bir tane "index.php" dosyası oluşturalım ve eklentimizi sayfaya dahil edelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webderslerim.com</title>
<link rel="stylesheet" href="datatables.min.css">
<style>
.kapsa{width:960px;margin:0px auto;}
</style>
</head>
<body>
<div class="kapsa">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>İd</th>
<th>Başlık</th>
<th>Açıklama</th>
<th>Eklenme tarihi</th>
<th>İşlemler</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Php dersleri</td>
<td>Php dersleri açıklaması burada olacak</td>
<td>13.09.2017</td>
<td><button>Sil</button><button>Düzenle</button></td>
</tr>
<tr>
<td>2</td>
<td>Javascript dersleri</td>
<td>Javascript dersleri açıklaması burada olacak</td>
<td>13.09.2017</td>
<td><button>Sil</button><button>Düzenle</button></td>
</tr>
<tr>
<td>3</td>
<td>C# dersleri</td>
<td>C# dersleri açıklaması burada olacak</td>
<td>13.09.2017</td>
<td><button>Sil</button><button>Düzenle</button></td>
</tr>
<tr>
<td>4</td>
<td>Java dersleri</td>
<td>Java dersleri açıklaması burada olacak</td>
<td>13.09.2017</td>
<td><button>Sil</button><button>Düzenle</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="datatables.min.js"></script>
<script type="text/javascript">
$(function(){
$('#example').DataTable();
});
</script>
</body>
</html>Bu şekilde deneme olarak eklediğimiz verileri eklentimiz ile çalıştırdık. Artık örneğimizi PHP ve Mysql ile dinamikleştirelim. İlk olarak "tbody" elementini siliyoruz(verileri çekerken otomatik oluşacak). Ardından jQuery kodumuzu aşağıdaki gibi düzenliyoruz.
$(function(){
$('#example').DataTable({ // ajax.php dosyasına POST isteği yolluyoruz.
"processing": true,
"serverSide": true,
order:[],
"ajax": {
url:"ajax.php",
method:"POST"
}
});
});Şimdi bir tane "ajax.php" adında dosya oluşturalım. Ve dosyamız içerisinde gerekli bilgileri döndürelim.
<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
// Eğer ajax isteği yapılmışsa burayı çalıştır
require_once "baglan.php"; // Veritabanı bağlantısı ve gerekli fonksiyonlarımızın olduğu dosyayı sayfamıza dahil ediyoruz
$kolonlar = ["icerik_id","icerik_baslik","icerik_aciklama","eklenme_tarihi"];
$arama_kelime = isset($_POST["search"]["value"]) ? $_POST["search"]["value"] : ''; // Eğer boş değilse eklentinin arama kısmından yollanan değeri alıyoruz.
$siralama = isset($_POST["order"]) ? $_POST["order"] : ''; // Eğer boş değilse eklentinin sıralama kısmından yollanan değeri alıyoruz.
$length = isset($_POST["length"]) ? $_POST["length"] :'' ; // Eğer boş değilse eklentinin sayfada kaç veri gösterileceği kısmından yollanan değeri alıyoruz.
$limit = isset($_POST["start"]) ? $_POST["start"] :'' ; // Eğer boş değilse eklentinin kaçıncı veriden itibaren başlayıcağı değeri alıyoruz.
$sql = "SELECT * FROM icerikler ";
$toplamFiltreVeri = toplam_veri(); // Eğer filtreleme işlemi yapılmazsa filtrelenmiş veri sayısını toplam veri sayısına eşitle
if(!empty($arama_kelime)) // Eğer arama_kelime değişkeni boş değilse yani arama yapılmışsa
{
$arama_sql = "WHERE ";
$arama_index = 0;
foreach ($kolonlar as $kolon) {
// Kolonlar dizisindeki elemanların hepsini arama işlemi şeklinde sql cümlesine ekliyoruz.
if($arama_index == 0)
{
$arama_sql .= $kolon." LIKE :arama_kelime ";
}else{
$arama_sql .= "OR ".$kolon." LIKE :arama_kelime ";
}
$arama_index++;
}
$sql .= $arama_sql;
$toplamFiltreVeri = arama_toplam_veri($arama_kelime,$arama_sql); // Arama yaptıktan sonra toplam kaç veri olduğunu buluyoruz.
}
if(!empty($siralama)) // Eğer siralama değişkeni boş değilse yani sıralama yapılmışsa
{
// Sıralamadan seçilen değeri kolonlar dizimize yollayarak o değerdeki kolona göre sıralama yapıyoruz
$sql .= "ORDER BY ".$kolonlar[$siralama['0']['column']]." ".strtoupper($siralama['0']['dir'])." ";
}else{
// Eğer sıralama işlemi yapılmamışsa varsayılan olarak icerik_id kolonuna göre sıralama yap
$sql .= "ORDER BY icerik_id DESC ";
}
if($length != 1)
{
// Sayfalama işlemini yapıyoruz
$sql .= "LIMIT ".$limit.",".$length;
}
$veriler = $db->prepare($sql); // Oluşturulan sql cümlesini gönder
if(!empty($arama_kelime))
{
// Eğer arama işlemi yapılmışsa değişkeni programa tanıt
$veriler->bindValue(':arama_kelime', '%' . $arama_kelime . '%');
}
$veriler->execute(); // Çalıştır
$data = [];
foreach ($veriler->fetchAll(PDO::FETCH_OBJ) as $veri) {
// Tüm sonuçları veri değişkenine aktar
$veriDizi = []; // Herbir veriyi bu değişkende depolayacağız.
foreach ($kolonlar as $kolon) {
// Veri değişkeni içerisinden dinamik olarak kolon değişkeni içerisindeki kolonu getir
$veriDizi[] = $veri->$kolon;
}
$veriDizi[] = "<button>Sil</button><button>Düzenle</button>"; // Ekstra olarak Sil düzenle butonları ekliyoruz
$data[] = $veriDizi; // Her seferinde oluşan dizimizi data değişkenine depoluyoruz
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => toplam_veri(), // Toplam tablodaki veri sayımızı ekle
"recordsFiltered" => $toplamFiltreVeri, // Toplam filtrelenmiş veri sayısını ekle
"data" => $data // Verileri depoladığımız değişkeni ekle
);
echo json_encode($output); // Json çıktısı ver
}else{
// Eğer ajax isteği yapılmamışsa burayı çalıştır
die("Erişim engellendi");
}
?>Son olarak "baglan.php" dosyamızı oluşturalım. Bu dosya içerisine kullanacağımız fonksiyonları ve veritabanı bağlantısını yazalım.
<?php
// Veritabanı bağlantısı
try {
$db = new PDO("mysql:host=localhost;dbname=veritabani_adi_burada_olacak;charset=utf8","veritabani_kullanici_adi_burada_olacak","veritabani_sifresi_burada_olacak");
} catch (PDOException $e) {
die($e->getMessage());
}
function toplam_veri()
{
// Tablomuz içerisindeki toplam veri sayısını buluyoruz
global $db;
$toplam = $db->prepare("SELECT count(*) FROM icerikler");
$toplam->execute();
return $toplam->fetchColumn();
}
function arama_toplam_veri($arama_kelime,$sql)
{
// Arama yapıldığında toplam kaç tane veri olduğunu buluyoruz.
global $db;
$toplam = $db->prepare("SELECT COUNT(*) FROM icerikler ".$sql);
$toplam->bindValue(':arama_kelime', '%' . $arama_kelime . '%');
$toplam->execute();
return $toplam->fetchColumn();
}
?>Test amaçlı tablo ve verileri sql kodları.
CREATE TABLE `icerikler` (
`icerik_id` int(11) NOT NULL,
`icerik_baslik` varchar(200) NOT NULL,
`icerik_aciklama` varchar(300) NOT NULL,
`eklenme_tarihi` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `icerikler` (`icerik_id`, `icerik_baslik`, `icerik_aciklama`, `eklenme_tarihi`) VALUES
(1, 'Php dersleri', 'Php dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(2, 'Css dersleri', 'Css dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(3, 'Javascript dersleri', 'Javascript dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(4, 'C# dersleri ', 'C# dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(5, 'Java dersleri', 'Java dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(6, 'C++ dersleri', 'C++ dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(7, 'ASP.net dersleri', 'ASP.net dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(8, 'SQL dersleri', 'SQL dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(9, 'Python dersleri', 'Python dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(10, 'Swift dersleri', 'Swift dersleri içerik açıklaması', '2017-09-13 20:23:25'),
(11, 'NodeJs dersleri', 'NodeJs dersleri içerik açıklaması', '2017-09-13 20:23:25');
ALTER TABLE `icerikler`
ADD PRIMARY KEY (`icerik_id`);
Yorum yapmak için lütfen giriş yapın veya üye olun