Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines
Pls check this column filtering example of DataTables:
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
You could convert it to datagrid/DataTables php like this:
<style>
thead input {
width: 100%;
}
</style>
<?php
DataTables::create(array(
"name" => "example",
...
"options" => array(
"initComplete" => "function () {
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type=\"text\" placeholder=\"' + title + '\" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e) {
e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
}",
),
"onReady" => "function() {
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');
}",
));
Let KoolReport help you to make great reports. It's free & open-source released under MIT license.
Download KoolReport View demo