CODEWITHSUNDEEP
javascriptjquerydatatables
BrandonFlynn-NB
BrandonFlynn-NB

Reputation: 400

Filtering DataTables rows seems to remove them, rather than hide them

Goal: Allow user to select names from a <select> dropdown. Those names exist in a column in a DataTables table. If a row does not contain that name it is hidden. I do NOT want to do this with the .search() function because I want to be able to search within the filtered selection.

Problem: Instead of hiding rows, my code seems to delete them -- meaning I can't perform a different filter without refreshing the page.

Approach: I've tried the below code, and others. This is based off some documentation on the DataTables website. My goal is nearly identical, the code also, and yet I am not achieving the same results. This is the closest to success I've come. I'm hardcoding instead of drawing from the <select> right now for testing purposes.

// This works fine. All columns that have 'jim' in the names column appear. 
// All others are hidden.
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex )
    {
        if (data[4] == "jim")
        {
            return true;
        }
        return false;
    });

The above works fine. I only get rows that have 'jim' in the names column. However, if I follow the above code with the following...

    // The result of this block: 0 rows. 
    // There are no rows given when the table clearly has rows containing 'brandon' in the names field.
    $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex )
    {
        if (data[4] == "brandon")
        {
            return true;
        }
        return false;
    });

...my table becomes empty. This must be because the filter I'm performing is deleting the rows instead of hiding them. Additionally, following either/both of these blocks with table.draw() seems to have no effect whatsoever.

Additional Info:
Versions:

There is a similar question aleady on StackOverflow but the only answer linked to the DataTables documentation which did not give me a solution.

Question: How do I filter rows according to the content of a cell? Why does it seem like my rows are being deleted instead of hidden?

Upvotes: 0

Views: 1757

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

Adding two custom search functions $.fn.dataTable.ext.search array means that both conditions should be satisfied. You're instructing the DataTable to show you rows that have both jim AND brandon in the same fifth column, which obviously results in an empty table.

This should would work:

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex )
    {
        if (data[4] == "jim" || data[4] == "brandon")
        {
            return true;
        }
        return false;
    });
);

You can also remove the custom search function with $.fn.dataTable.ext.search.pop() after the search is performed with draw() API method.

Alternative solution would be filtering with column().search() and <select> elements which has been demonstrated in this example. In this example you can still search in filtered results. That's because search() and column().search() can be used simultaneously to achieve the effect you want.

Upvotes: 1

Related Questions