09.a.Datatables

Datatables Util

Datatables bir araç olarak v2.0.6 sürümü ile birlikte eklendi. Popüler JS eklentisi datatables için basit, anlaşılır ve kolay bir serverside çözümü olarak geliştirildi.

Başlamadan önce JQuery ve Datatables eklentilerini sayfanıza dahil ettiğinizden emin olun.

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>

Back-end tarafında aşağıdaki örneği takip edin. Kendinize uygun QueryBuilder'ı yazın ve datatables() yöntemini kendineze uygun şekilde çağırın.

limit() ve offset() yöntemlerinin kullanılmadığına dikkat edin.

echo DB::select('p.title, p.description, p.content, p.created_at, p.status')
    ->selectConcat('user', 'u.name, " ", u.surname, " #" , u.id')
    ->from('posts AS p')
    ->where('p.status', 1)
    ->join('users AS u', 'u.id=p.user_id', 'left')
    ->where('u.status', 1)
    ->datatables([
        ['db' => 'title', 'dt' => 0],
        ['db' => 'description', 'dt' => 1],
        ['db' => 'content', 'dt' => 2],
        ['db' => 'user', 'dt' => 3],
        ['db' => 'created_at', 'dt' => 4, 'formatter' => function ($d, $row){
            return date("d/m/Y", strtotime($d));
        }],
        ['db' => 'status', 'dt' => 5, 'formatter' => function ($d, $row){
            return $d == 1 ? 'Active' : 'Inactive';
        }],
    ]);

Ve artık tek yapmanız gereken aşağıdaki JQuery kodunu kendiniz için uyarlayıp sayfanıza dahil etmektir.

$(document).ready(function(){
    $('#datatableId').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "backend.php" // Sayfa url si.
    });
});

Hepsi bu kadar. :)