Şö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>