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> 