PHP jquery datatable kullanımı

PHP jquery datatable kullanarak sayfa yenilemeden işlem yapmamızı mümkün hale getirerek jquery datatable ile tüm işlemlerimizi halledebiliyoruz

Merhaba değerli yazılımcı dostlarım bu konum da sizlere php jquery datatable nasıl kullanılır onu göstereceğim. PHP jquery datatable kullanarak sayfa yenilemeden işlem yapmamızı mümkün hale getirerek jquery datatable ile tüm işlemlerimizi halledebiliyoruz.

Öncelikle sayfamızı hazırlıyoruz (örnek sayfa)

<?php 
$lang['t_datable_language_info'] = '_TOTAL_ records _START_ of _END_ record showing.';
$lang['t_datable_language_info_empty'] = 'There are no records to show.';
$lang['t_datable_language_loading_records'] = 'Loading records.';
$lang['t_datable_language_length_menu'] = 'Show _MENU_ record on page';
$lang['t_datable_language_zero_records'] = 'No records / Table is empty';
$lang['t_datable_language_search'] = 'Search';
$lang['t_datable_language_info_filtered'] = '(Filtered from total _MAX_ records)';
$lang['t_datable_language_paginate_first'] = 'First';
$lang['t_datable_language_paginate_previous'] = 'Previous';
$lang['t_datable_language_paginate_next'] = 'Next';
$lang['t_datable_language_paginate_last'] = 'Last';

echo '<!DOCTYPE html>
<html>
<head>
<base href="http://localhost/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Simple Datatable Example</title>
<link rel="stylesheet" href="datatables/dataTables.bootstrap.min.css" />
</head>
<body>
  <div class="card">
    <div class="card-body">
        <h4>Data Table</h4>
        <p>Example</p>
        <table id="data-table" class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Fullname</th>
                    <th>Username</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
</body></html>
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/bootstrap.min.js"></script>
<script type="text/javascript" src="datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables/dataTables.bootstrap.min.js"></script>
<script>
$("#data-table").DataTable({
    language: {
        info: "'.$lang['t_datable_language_info'].'",
        infoEmpty: "'.$lang['t_datable_language_info_empty'].'",
        loadingRecords: "'.$lang['t_datable_language_loading_records'].'",
        lengthMenu: "'.$lang['t_datable_language_length_menu'].'",
        zeroRecords: "'.$lang['t_datable_language_zero_records'].'",
        search: "'.$lang['t_datable_language_search'].'",
        infoFiltered: "'.$lang['t_datable_language_info_filtered'].'",
        paginate: {
            first: "'.$lang['t_datable_language_paginate_first'].'",
            previous: "'.$lang['t_datable_language_paginate_previous'].'",
            next: "'.$lang['t_datable_language_paginate_next'].'",
            last: "'.$lang['t_datable_language_paginate_last'].'"
        },
    },
    "ajax": {
        url: "path/to/ajax(htaccess_link-ex: http://localhost/ajax)",
        type: "POST",
        data: {getUsers:"getUsers"},
        dataSrc: ""
    },
    columns: [
        {"data": "id"},
        {"data": "fullname"},
        {"data": "username"},
    ],
    responsive: true,
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        var index = iDisplayIndex + 1;
        $("td:eq(0)",nRow).html(index);
        return nRow;
     }
});
</script>';

Verileri dizi içerisine alıp listelemek

<?php require_once('config.php');
/*
* https://github.com/ThingEngineer/PHP-MySQLi-Database-Class
* Do you have a session? / Security
*/
if(isset($_SESSION['session'])){
        /*
        * Get User List
        */
        if(PERMISSION_VIEW_USER==1){
            if(isset($_POST['getUsers'])){
                header('Content-Type: application/json');
                $dbh->orderBy("id", "DESC"); $v = -1;
                foreach($dbh->get("user", null, array("firstname", "lastname", "username")) as $userRow){ $v++;
                    $data[]["id"] = $v; /* Add array to number (Ordering) */
                    $data[$v]["fullname"] = $ktf->strUpFirst($userRow['firstName']).'&nbsp;<span class="text-uppercase">'.$userRow['lastName'].'</span>';
                    $data[$v]["username"] = $userRow['username'];
                }
                echo json_encode($data);
            }
        }
    }
?>

Gelelim kodlar ne işe yarıyor ve neler yaptık?

Örnek sayfa da html tagları içerisinde, tablomuz da hangi verilerin olacağını belirledik ve javascript kodlarımızı yazdık. Javascript kodlarında ise bir sınıfı belirterek datatable hazırlığını tamamladık. Dil ayarlarından sonra ajax parametresi ile verilerin hangi adresten çekileceğini ve post işlemi ile sunucu tarafında çağırılan post işlemi ile belirtmiş olduk.

Kolonlar dizisinde veritabanından çekilen listeye gelecek kolonları belirttik ve sunucu tarafında ise veritabanı bağlantı ve ayar dosyasını çektik ve güvenlik, erişim, header ve foreach kodu ile bir diziye atadık. Dizi de yer alan $data[]["id"] değişkenine otomatik olarak artan $v değerini verdik (örnek sayfa da otomatik artış değerini, buradan okumaktadır). Dizi id sini verdikten sonra sıralamaya göre hangi kolona hangi veri geleceğini belirttik, isterseniz bu kolonları değiştirip farklı alanlar için de kullanabilirsiniz.

Github:

https://github.com/oxcakmak/PHP-jquery-datatable

Bir daha ki konumda görüşmek üzere, sağlıcakla kalın.