PHP ve Jquery Datatable Server Side Processing ile hızlı işlemler

Merhabalar , bu yazımda sizlere  Jquery Datatable'de nasıl büyük verilerle hızlı işlemler yaparız onu anlatacağım.
 

Öncelikle bu yazıya geldiyseniz eğer, büyük ihtimal  sorun Jquery Datatable'nin verileri yükleme hızından müzdarip oluşunuzdur. Ben de bu yazımda sizlere  klasik yöntemler ile 10.000 kayıtlık bir veriyi  13 saniye civarında dom yüklenmesi yerine , 351.000 kayıtlık veriyi nasıl 0.12 -0.5 saniye bandında yüklersiniz onu anlatacağım.

Bu yüklenme hızı neden yavaş ?

Öncelikle bu hızın yavaşlamasının nedeni : Sizin binlerce veriyi Datatable içerisine bir döngü ile aktarırken bu verilerin DOM'un içerisine aktarılması ve bu aktarma sırasında sıralanamsı ardından sayfalanması gibi işlemler doğal olarak uzun sürüyor.

Hangi yöntemle bu işi çözeceğiz ?

Jquery Datatable'nin kendi özellikleri içerisinde bulunan serverSide özelliği sayesinde ,

serverSide özelliği ne işe yarıyor ?
ServerSide özelliği ek olarak ayrı bir özellik olan ajax özelliği ile çalışıyor bu özellik klasik jquery ajax aslında değer olarak aldığı linke istek yapacak . Peki ne isteği yapacak :
Datatable'nin mükemmel özelliği burada devreye giriyor sayfa yüklendiği anda ve biz "sayfada göster" , "Arama kutusu" , "Sayfa", "ileri-geri" gibi özellikleri her değiştirdiğimizde belirttiğimiz php sayfasına default olarak GET istekleri yapıyor bunlar içerisinde yukarıda belirttiğim "Sayfada göster" gibi seçeneklerin değerleri veritabanında kullanılmak üzere yollanılıyor.
Örneğin SQL'de kullandığımız "limit" değeri bildiğiniz gibi ne kadar veri getireleceğini belirler , datatable'de siz sayfada göster verisini her değiştirdiğinizde buna göre limit değerini de değiştirir. Diğer işlemlerde aynı mantıkta çalışıyor , arama kutusundaki değer de her değiştiğinde WHERE komutunda değişiklik yapmamız gerekiyor, aynı zamanda toplam dönen verinin adetini de bizim sorgu sonrası almamız gerekiyor ve en sonunda elimizde bu sorgular neticesinde oluşan data yani veriyi, toplam kaç veri çektiğimizin adeti , kaçıncı değişiklikte olduğumuzun sayısı gibi verileri json_encode ile Datatable'ye yolluyoruz ve o da bize ona göre işlem yapıyor.
Gönderilen verilen şu şekilde olacak:
 

{
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    [
      "Yılmaz",
      "Kadan",
      "19",
      "Türkiye"
    ],
}

Biz kendimiz de bu arka plandaki ajax dosyamızda kontrolleri sağlayabiliriz ,ancak her alan için ayrı ayrı WHERE komutu yazdıktan sonra ve alan1 = $gelen or alan2 = $gelen or $alan3 = $gelen gibi uzun uzun sorgular ve aynı zamanda her farklı tablo kullanışımızda bu kodları yazmak hem kod bütünlüğü açısında saçma hem de yorucu olacaktır. Bunun için yazılmış çok güzel bir kütüphane var adı SSP Class aşağıda gereklilklerde ilgili Github sayfasından edinebilirsiniz.

Gereklilikler

• Jquery Datatable
• SSP Sınıfı (Bu sınıf verileri arka planda çekmemize olanak sağlayacak) kodlara ulaşmak için PHP SSP class diye aratmanız yeterli olacaktır.

Html  ayarlamaları 

 <table id="datatable" class="table table-primary table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>ADI</th>
                        <th>SOYADI</th>
                        <th>MAİL</th>
                        <th>yas</th>
                        <th>okul</th>
                        <th>Duzenle</th>
                        <th>Sil</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
</table>

Burada ajax dosyamdan kaç alan sütun çekeceksem  o kadar  th açıyorum , tbody boş kalabilir , th'larımın içerise istediğimi yazabilirim bize kalmış.

Datatable ayarlamaları 

 $(document).ready(function() {


            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "serverside/ajax.php?mode=binlerce",
                language: {
                    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json"
                }
});

Burada serverSide özelliğini true olarak ayarlıyorum, aynı zamanda processing özelliğini true ayarlıyorum  processing ekranda Türkçe olarak ajax sorgusunun sonucunu beklerken "işleniyor" ibaresi çıkartıyor.
ardından ajax özelliğime istek yapılacak sayfamı belirtiyorum, birden fazla tablom olabilir ve tüm ServerSide işlemlerini aynı sayfada yapmak adına ve gelen isteğin hangi tablo adına geldiğini anlamak amacıyla ek olarak mode = binlerce değerini yolluyorum.
Türkçe dil desteği içinde kendi sitesinden Turkish.json'u dahil ediyorum.

Ajax dosya yapılandırması 

Verileri yollayacağım ajax dosyamın başına bir GET kontrolü yapıyorum ve hangi tablo için istek geldiğini sorguluyorum,

if ($_GET['mode'] == 'binlerce') {

Bu değeri Datatable ajax ayarlaması yaparken ayrıyetten 'mode' adında bir parametre yolluyorduk unutmayalım.

SSP Sınıfı kullanımı

SSP sınıfı yukarıda bahsettiğim gibi kendi içerisinde bizim için tüm işlemleri yapıyor, biz sadece gerekli değerleri SSP sınıfın simple fonksiyonuna veriyoruz.
SSP için ayrıyetten bir veritabanı bağlantısı yapmamıza gerek yok kendi içerisinde bizim verdiğim bilgilere göre bağlantıyı yapıyor.
SSP dosyamı ajax işlemleri yapacağım sayfama davet ediyorum.

require 'ssp.php';

Veritabanı bağlantısı için gerekli konfigürasyon:

 $dbDetails = array(
        'host' => 'veritabani_host',
        'user' => 'kullanici',
        'pass' => 'sifre',
        'db'   => 'veritabanım'
    );
    $table = "tablo_ismim";

    $primaryKey = 'Veritabanındaki birincil alanım örneğin ID';

Çekmek istediğim sütunlar ve Datatable'de hangi sırada gösterlieceğini seçiyorum.

 $columns = array(
        array('db' => 'ID', 'dt' => 0),
        array('db' => 'ad', 'dt' => 1),
        array('db' => 'soyad',  'dt' => 2),
        array('db' => 'mail',      'dt' => 3 , "formatter" =>function($mail){
            return "<a href= 'mailto:{$mail}'> {$mail} </a>";
        }),
        array('db' => 'yas',     'dt' => 4),
        array('db' => 'okul',    'dt' => 5),
        array('db' => 'ID',  'dt' => 6,'formatter' => function($data){
            return "<a href = 'duzenle.php?id={$data}' class = 'btn btn-primary'>Düzenle </a>";
        }),
        array('db' => 'ID',  'dt' => 7,'formatter' => function($d){
            return "<a href = 'sil?id={$d}' class = 'btn btn-danger'>Sil </a>";
        })
        
    );

Burada 'db' sabit olacak o veritabanından çekeceğim tablodaki alan isimlerini tekabül ediyor yanlış yazmayın.
Ardından 'dt' ise verileri çekeceğim datatable'de hangi sırada olacaklarını belirttiğm alan 0'dan başlar dikkatli olun.

En güzel olaylardan birisi de 'formatter' özelliği ,
formatter bir callback fonksiyonu alıyor ve bu fonksiyonun parametre olarak aldığı değer bizim çekmek istediğimiz alan oluyor,
formatter bizim için çekeceğimiz alanı tabloda nasıl yansıtacağımıza karar vermemize olanak sağlayan bir alan ,
örneğin ben mail bilgisini bir link etiketine çevirdim ve bu sayede mail:to özelliği sayesinde tıklanabilir bir mail linki oluşturdum.
Aynı şekilde aşağı ise sıkça kullandığımız sil ve duzenle butonlarını oluşturup ilgili sayfalara id değerini yolladım.

Bu işlemlerin ardından tüm verileri SSP sınıfının simple fonksiyonu ile işleyip json_encode ile bastırıyoruz.
Parametrelerin başında sayfaya yapılan $_GET isteğini yolluyoruz ve diğer değerlerimizi de beraberinde yolluyoruz.
 

 echo json_encode(
        SSP::simple($_GET, $dbDetails, $table, $primaryKey, $columns)
 );

Kodlar github sayfamda gitmek için bu linke tıklayabilirsiniz.
İşlemler bu kadar detaylar için videomu izleyebilirsiniz.

Saygılar sevgiler...