PHP - Datatables Server-Side ile Filtreleme Nasıl Yapılır? - Sayfa 2

06-01-2021, 00:01:11

#10

Şöyle basit bir örnek yaptım sizin için
Herhangi bir php dosyası olarak kayıt edip deneyebilirsiniz.

<?php
if (isset($_REQUEST['draw'])) {
    header('Content-type: application/json');

    $rows = array();

    array_push($rows, array( '#1', 'image.jpg', '001', 'Evet', 'Klavye', 'Acer', '5', '10.00 TL', '13.00 TL', 'Hayır', 'Aktif' ));
    array_push($rows, array( '#2', 'image.jpg', '002', 'Hayır', 'Klavye', 'Toshiba', '100', '20.00 TL', '27.00 TL', 'Evet', 'Pasif' ));

    $search = $result = array();

    foreach ($_GET['columns'] as $index => $keys) {
        if ( ! empty($keys['search']['value'])) {
            array_push($search, array('index' => $index, 'term' => $keys['search']['value']));
        }
    }

    if ($search) {
        foreach ($rows as $key => $values) {
            foreach ($search as $items) {
                if (strpos(mb_strtolower($values[$items['index']]), mb_strtolower($items['term'])) !== FALSE) {
                    array_push($result, $values);
                }            
            }
        }
    }

    $data = ($search ? $result : $rows);

    exit(json_encode(array( 'recordsTotal' => sizeof($rows), 'recordsFiltered' => sizeof($data), 'data' => $data ), JSON_NUMERIC_CHECK));
}
?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        thead input {
            width: 100%;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css">
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Görsel</th>
                <th>Ürün Kodu</th>
                <th>Orijin</th>
                <th>Kategori</th>
                <th>Marka</th>
                <th>Adet</th>
                <th>Maliyet</th>
                <th>Satış</th>
                <th>İndirimli</th>
                <th>Duurum</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th>Görsel</th>
                <th>Ürün Kodu</th>
                <th>Orijin</th>
                <th>Kategori</th>
                <th>Marka</th>
                <th>Adet</th>
                <th>Maliyet</th>
                <th>Satış</th>
                <th>İndirimli</th>
                <th>Duurum</th>
            </tr>
        </tfoot>
    </table>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example thead tr').clone(true).appendTo( '#example thead' );
            $('#example thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        
                $( 'input', this ).on( 'keyup change', function () {
                    if ( table.column(i).search() !== this.value ) {
                        table
                            .column(i)
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        
            var table = $('#example').DataTable( {
                "pageLength": 50,
                "stateSave": false,
                "processing": true,
                "serverSide": true,            
                orderCellsTop: true,            
                fixedHeader: true,              
                "ajax": ""
            } );
        } );
    </script>
</body>
</html>

06-01-2021, 00:08:00

#11

G3da

Eğer verileriniz 5-10K ve üzerindeyse bu sefer gelen arama kriterlerine uygun SQL sorgusuna koşullar eklenerek sonucun çıkarılması daha mantıklı olur, ama eğer 500-2K arasında bir ürün listesi var ise $rows dizisine tablonuzu yazdırmanız yeterli olacaktır, işinizi görür diye düşünüyorum.

SQL olarak bir sorgu cümleği örneği isterseniz onuda verebilirim.

G3da adlı üyeden alıntı: mesajı görüntüle

Şöyle basit bir örnek yaptım sizin için
Herhangi bir php dosyası olarak kayıt edip deneyebilirsiniz.

<?php
if (isset($_REQUEST['draw'])) {
    header('Content-type: application/json');

    $rows = array();

    array_push($rows, array( '#1', 'image.jpg', '001', 'Evet', 'Klavye', 'Acer', '5', '10.00 TL', '13.00 TL', 'Hayır', 'Aktif' ));
    array_push($rows, array( '#2', 'image.jpg', '002', 'Hayır', 'Klavye', 'Toshiba', '100', '20.00 TL', '27.00 TL', 'Evet', 'Pasif' ));

    $search = $result = array();

    foreach ($_GET['columns'] as $index => $keys) {
        if ( ! empty($keys['search']['value'])) {
            array_push($search, array('index' => $index, 'term' => $keys['search']['value']));
        }
    }

    if ($search) {
        foreach ($rows as $key => $values) {
            foreach ($search as $items) {
                if (strpos(mb_strtolower($values[$items['index']]), mb_strtolower($items['term'])) !== FALSE) {
                    array_push($result, $values);
                }            
            }
        }
    }

    $data = ($search ? $result : $rows);

    exit(json_encode(array( 'recordsTotal' => sizeof($rows), 'recordsFiltered' => sizeof($data), 'data' => $data ), JSON_NUMERIC_CHECK));
}
?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        thead input {
            width: 100%;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css">
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Görsel</th>
                <th>Ürün Kodu</th>
                <th>Orijin</th>
                <th>Kategori</th>
                <th>Marka</th>
                <th>Adet</th>
                <th>Maliyet</th>
                <th>Satış</th>
                <th>İndirimli</th>
                <th>Duurum</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th>Görsel</th>
                <th>Ürün Kodu</th>
                <th>Orijin</th>
                <th>Kategori</th>
                <th>Marka</th>
                <th>Adet</th>
                <th>Maliyet</th>
                <th>Satış</th>
                <th>İndirimli</th>
                <th>Duurum</th>
            </tr>
        </tfoot>
    </table>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example thead tr').clone(true).appendTo( '#example thead' );
            $('#example thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        
                $( 'input', this ).on( 'keyup change', function () {
                    if ( table.column(i).search() !== this.value ) {
                        table
                            .column(i)
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        
            var table = $('#example').DataTable( {
                "pageLength": 50,
                "stateSave": false,
                "processing": true,
                "serverSide": true,            
                orderCellsTop: true,            
                fixedHeader: true,              
                "ajax": ""
            } );
        } );
    </script>
</body>
</html>