Filtering Column Textboxes on Top of DataTable
Filtering Column Textboxes on Top of DataTable
arosner
Posts: 35Questions: 8Answers: 1
Hello,
I have a filtering search textbox at the bottom of each column. I would like to move the search textbox to the top of each column. When I make the following code change, the appearance looks fine. However, the column filtering does not show the appropriate results when executed.
Working code where the filtering is at the bottom:
$(document).ready(function () {
bindDatatable();
});
function bindDatatable() {
datatable = $('#tableData')
.DataTable({
"dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
"processing": true, // for show progress bar
"serverSide": false, // for process server side
"filter": true, // this is to enable filter (search box)
"pageLength": 10,
"ajax": {
"url": "/DataManipulation/LoadBudgetFunctionDescription",
"type": "POST",
"datatype": "json"
},
"language": {
"emptyTable": "No record found.",
"processing":
'<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:#2a2b2b;"></i><span class="sr-only">Loading...</span> '
},
initComplete: function () {
this.api()
.columns()
.every(function () {
let column = this;
let title = column.footer().textContent;
// Create input element
let input = document.createElement('input');
input.placeholder = title;
column.footer().replaceChildren(input);
// Event listener for user input
input.addEventListener('change', () => {
if (column.search() !== this.value) {
column.search(input.value).draw();
}
});
});
},
"columns": [
{
"data": "AGYBFC",
"autoWidth": true,
"searchable": true,
},
{
"data": "AGENCY",
"autoWidth": true,
"searchable": true,
},
{
"data": "BFCODE",
"autoWidth": true,
"searchable": true,
},
{
"data": "BUDFUNCNAM",
"autoWidth": true,
"searchable": true,
},
{
"data": "BUDFUNCDES",
"autoWidth": true,
"searchable": true,
},
]
});
To move the filtering textboxes to the bottom, I modify the following lines of code in the initComplete function:
- let title = column.footer().textContent; to let title = column.header().textContent;
- column.footer().replaceChildren(input); to column.header().replaceChildren(input);
As I mentioned above, the visual is fine, but the results do not get filtered properly when executing the filter.
Thank you!
Answers
Its difficult to debug just your code snippet. We will need to see a running test case showing the issue to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Maybe this example will help.
Kevin
Hi Kevin,
I noticed the example, but I was not interested in a fixed header nor filtering with each keystroke. Also, I have an ajax call which will be difficult to replicate in the test system provided. Does the page source help?
Regards,
Al
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
The example will work whether or not FixedHeader is used. You can remove the
keyupevent if you only want to search onchange. The data source doesn't matter for this solution. You can build a test case using an Ajax data source. See all the options in this technote.I may be missing it but I don't see where you are applying the search inputs to the header. If you want help with your solution please buiild a simple test case showing us what you are doing. You can start with this basic Ajax template:
https://live.datatables.net/dodobuge/1/edit
Kevin
Here is another example with search inputs in the header. Note the use of
orderCells Topto move the sorting events to the top header row.https://live.datatables.net/giharaka/1/edit
Kevin
I would guess the problem with your code is the selector used for the vent handler. Have you verified if the
changeevent fires when using the search inputs?Kevin