$.fn.dataTable.ext.search.push not working after clearing table and adding rows

dystopian

/// LOCATIONS TABLE HANDLING
var location_table = $('#location_table').DataTable({
    "lengthMenu": [[20, 40, 60, 80, 100, -1], [20, 40, 60, 80, 100, "All"]],
    "dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
    "oLanguage": {
        "sSearch": 'Quick Search'
    },
    "aaSorting": [],
    "iDisplayLength": <?=$_user->preferences->record_view ? $_user->preferences->record_view : 20;?>,
    "columns": [
        {"data":"name"},
        {"data":"address"},
        {"data":"city"},
        {"data":"state"},
        {"data":"zip"},
        {"data":"phone"},
        {"data":"delivery_miles"},
        {"data":"delivery_hours"}
    ],
    "createdRow": function(row, data, dataIndex){
        $(row).data('location', data.location_id).data('active', data.active)
        if(data.active === 0){
            $(row).css('background-color', 'red')
        }
    }
});

loadTableResults(location_table, $('#searchForm'))
// hide / show inactive rows
$(".hide-inactive-location-btn").click(function() {
    if($(this).data('value') === 1){
        $.fn.dataTable.ext.search.pop();
        $(this).data('value', 0).text('Hide Inactive')
    } else {
        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
                return $(location_table.row(dataIndex).node()).data('active') == 1;
            }
        );
        // location_table.draw();
        $(this).data('value', 1).text('Show Inactive')
    }
    location_table.draw();
});
loadTableResults(location_table, $('#searchForm'))
function loadTableResults(table, form){
    if(typeof table == undefined || typeof form == undefined){
        return false;
    }
    table.clear().draw();
    $('#location_table .dataTables_empty').html('<span class="fas fa-spinner fa-2x fa-spin"></span>')
    return $.ajax({
        url:'../api/locations',
        type: 'GET',
        method: 'GET',
        data: form.serialize(),
        success:function(response){
            var o = response.results;
            if(o.length > 0){
                table.rows.add(o).draw();
            }
            if( $(".hide-inactive-location-btn").data('value') == 1 ){
                $.fn.dataTable.ext.search.push(
                    function(settings, data, dataIndex) {
                        return $(table.row(dataIndex).node()).data('active') == 1;
                    }
                );
                table.draw();
            }
            return true;
        }
    });
}

So there's a button that acts as a toggle to hide/show inactive rows of data. After using the loadTable function it works fine, but if I call the loadTable function again it refuses to appear even though dataTables recognizes that the hidden entry is still there. I cant seem to get it to load back in after that.

colin

Hi @dystopian ,

At a glance, there's nothing obviously wrong. There's a lot of code there, would you be able to link to a page or create a test case that demonstrates the problem. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

dystopian

I set up a test link

So it should load the results fine, and then filter inactive results fine until you press search (or any call of the loadTable() function) and then the filtering stops working

allan

function) and then the filtering stops working

Yes, because in it you are adding another function to the search array every time it is called (line 235 in your pen).

Generally you really don't want to do that. Indeed, even the push / pop for the active / inactive status I would very much recommend against. Add the search function plug-ins at the top level of the file only and have them query a variable or DOM element (a variable is faster) so they can determine if they should do filtering or not. e.g.:

            $.fn.dataTable.ext.search.push(
                function(settings, data, dataIndex) {
                    if ( showInactive ) {
                        return true; // no filter
                    }
                    return $(location_table.row(dataIndex).node()).data('active') == 1;
                }
            );

Allan

kthorngren

Indeed, even the push / pop for the active / inactive status I would very much recommend against.

I have a table where I push/pop the search function. Just curious why that process is not recommended.

Kevin