filtering table with a checkbox.

JoeJoeJoe

There is a checkbox on my page that is supposed to filter the table so that it displays only rows with one error or more. I had implemented this function before and it worked fine. It stopped working all of a sudden when I changed the way that ajax was being called in my code (this was necessary as it was preventing ajax.reload() from working). This is my code which was working before:

    $('input[name=checkB]').change(function () {
                    if ($("#checkB").is(":checked")) {
                        $.fn.dataTable.ext.search.push(
                            function (settings, data, dataIndex) {
                                var num = Number(data[4]);
                                if (num > 0) {
                                    return true;
                                }
                                return false;
                            }
                        );
                    }
                    else {
                        $.fn.dataTable.ext.search.pop();
                        tTable.draw();
                    }
                });

I have since tried the following code instead with no luck:

document.addEventListener("DOMContentLoaded", function (event) {
                var selector = document.querySelector('input[name=checkB]');
                selector.addEventListener('change', function (event) {
                    if (selector.checked) {
                        $.fn.dataTable.ext.search.push(
                            function (settings, data, dataIndex) {
                                var num = Number(data[4]);
                                if (num > 0) {
                                    return true;
                                }
                                return false;
                            }
                        );
                    } else {
                        $.fn.dataTable.ext.search.pop();
                        tTable.draw();
                    }
                });
            });

Anyone have any idea why this has stopped working or how to fix this?
Many thanks

colin

Hi @JoeJoeJoe ,

I'm surprised that would have to change, since it's independent of any Ajax calls. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

JoeJoeJoe

Just a quick update, I've managed to get the function to at least trigger and display an error message. It says:

"- JavaScript runtime error: Unable to get property 'ext' of undefined or null reference"

My first thought is that this has to do with which libraries are triggered first. I have css first, then jquery, then datatables css, then datatables jquery, then datatables plugins, which I believe is correct. I could not replicate the issue with a fiddle.

colin

Hi @JoeJoeJoe ,

Yep, that would seem likely, and yep, that order is correct. The ext probably refers to the $.fn.dataTable.ext code line, so it's saying that DataTables hasn't loaded at that point. If you can't reproduce, it would suggest the loading is being differently on the fiddle - it would be worth following that through. Without seeing the environment, it's hard to advise, since as you said, the code itself is sound if it works in the fiddle.

Cheers,

Colin

JoeJoeJoe

Never mind, was due to a typo, I had written $.fn.datatable... instead of dataTable. It still does not work.

JoeJoeJoe

I have two tables on my page, how does: $.fn.dataTable.ext.search.push() know which table to push? and How can I specify which table it should be pushing?

JoeJoeJoe

Problem solved. I just went about it a different way:

$(document).on('change', 'input[name="checkBox"]', function () {
            if (this.checked) {
                tTable.columns(4).search("1").draw();
            } else {
                tTable.columns(4).search("").draw();
            }
        });