Merhaba ,

Benim bir datatable kullanıyorum

istediğim altta görselde bulunan flitre özelliğini eklemek istiyorum çok bilgim yok deneme yanılma yöntemi ile beceremedim


AŞAĞIDAKİ KODLARI KENDİ DATATABLE KODUMUN İÇİNE NASIL EKLİYEBLİRİM ?

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

KENDİ DATATABLE KODUM

<script type="text/javascript">
$(document).ready(function () {
draw_data();

function format ( d ) {

var str= '<ol>';

$.each(d[0], function(i,v){
str = str + '<li>' + v + '</li>';
});
str = str + '</ul>';

// `d` is the original data object for the row
return str;
}

$(document).ready(function() {
var table = $('#invoices').DataTable();

$('#invoices tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );

$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );

function draw_data(start_date = '', end_date = '') {
var table = $('#invoices').DataTable({
'processing': true,
'serverSide': true,
'stateSave': true,
responsive: true,
'order': [],
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"language": {
"emptyTable": "Gösterilecek ver yok.",
"processing": "Veriler yükleniyor",
"sDecimal": ".",
"sInfo": "_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar gösteriliyor",
"sInfoFiltered": "(_MAX_ kayıt içerisinden bulunan)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "Sayfada _MENU_ kayıt göster",
"sLoadingRecords": "Yükleniyor...",
"sSearch": "Ara:",
"sZeroRecords": "Eşleşen kayıt bulunamadı",
"oPaginate": {
"sFirst": "İlk",
"sLast": "Son",
"sNext": "Sonraki",
"sPrevious": "Önceki"
},
"oAria": {
"sSortAscending": ": artan sütun sıralamasını aktifleştir",
"sSortDescending": ": azalan sütun sıralamasını aktifleştir"
},
"select": {
"rows": {
"_": "%d kayıt seçildi",
"0": "",
"1": "1 kayıt seçildi"
}
}
},
'ajax': {
'url': "<?php echo site_url('invoices/ajax_list')?>",
'type': 'POST',
'data': {
'<?=$this->security->get_csrf_token_name()?>': crsf_hash,
start_date: start_date,
end_date: end_date
}
},
'columnDefs': [
{
"className": 'details-control',
"data": null,
"defaultContent": '',
'targets': [0],
'orderable': false,
},
],
dom: 'Blfrtip',
buttons: ['csv','pdf','copy',
{
extend: 'excelHtml5',
footer: true,
exportOptions: {
columns: [1, 2, 3, 4, 5, 6, 7 ,8 , 9, 10]
}
}
],
});

$('#invoices tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );

if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
};

$('#search').click(function () {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if (start_date != '' && end_date != '') {
$('#invoices').DataTable().destroy();
draw_data(start_date, end_date);
} else {
alert("Date range is Required");
}
});
});
</script>