Disable filtering while still mantaining the search box

Disable filtering while still mantaining the search box

dfccccdfcccc Posts: 3Questions: 1Answers: 0

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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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?

    I want to disable the search box filtering the data before the endpoint updates it

    This sounds like the opposite of the post title. What is it that the end point will update?

    Allan

  • dfccccdfcccc Posts: 3Questions: 1Answers: 0
    edited October 22

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • dfccccdfcccc Posts: 3Questions: 1Answers: 0

    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!

Sign In or Register to comment.