Disable filtering while still mantaining the search box
Disable filtering while still mantaining the search box
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hello! I am trying to use a datatable to display some data, and update the data shown using an ajax endpoint, and I want to disable the search box filtering the data before the endpoint updates it. I have tried the following and the function "$.fn.dataTable.ext.search.push" is called but it still filters the rows.
The code is like so:
$(document).ready(function() {
let table = $('#info-table').DataTable();
$('.dataTables_filter input').on('input', function() {
clearTimeout(typingTimer);
let searchValue = $(this).val();
const company = `{{search.company}}`
typingTimer = setTimeout(function() {
$.ajax({
url: '{% url "dataendpoint" %}',
data: {q: searchValue },
success: function(response) {
table.clear();
$.each(response.results, function(index, item) {
let rowData = `
item.data
`;
table.row.add($(rowData)).draw();
});
table.draw();
},
error: function(xhr, status, error) {
console.error("Error fetching data:", error);
}
});
}, doneTypingInterval);
});
// Clear the timer if the user continues typing
$('.dataTables_filter input').on('keydown', function() {
clearTimeout(typingTimer);
});
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
return true;
});
});
Thank you!
This question has an accepted answers - jump to answer
Answers
I don't understand what you are looking to do I'm afraid. If you keep the search box, but it doesn't trigger a search, then what does it do?
This sounds like the opposite of the post title. What is it that the end point will update?
Allan
I want to keep the search box because i use the input text to trigger a search on my ajax endpoint which substitutes the data in the table with the results. The thing that i want to disable is the automatic filtering the searchbox does as filtering the data already in the table.
my bad should have explained a bit better, hope this makes sense
I see what you mean now - many thanks.
I would suggest having your own search box, rather than using the DataTables provided one. You'd need to disable the listeners on the search box, and then add your own. Much easier just to add your own.
Feature plugins (i.e. those which can be used in
layout
) can be created fairly easily. Do that, have it contain your search box which will trigger an Ajax request to get the new data and repopulate the DataTable as needed.Allan
Making my own search box made the trick! I didn't wan to do it in the beginning because I thought id have trouble placing it where the original one is but after actually trying everything works.
Thank you!