$(document).ready doesn't filter table as expected.

badbyte

I have a datatable that is supposed to be filtered when the page is loaded. The filtered criteria is being set by bootstraptoggle
The code works fine in theory but, when I load the page, the datatable isn't being filtered at all. Only when I click on the toggle, the datatable filters.
I have a problem with the 'showAllItems' toggle.

This is my code:

    var pmgListTable;
    $(document).ready(function () {
        pmgListTable = $('#pmgListTable').DataTable({
            scrollY: '70vh',
            autowidth: true,
            paging: false,
            searching: true
        });

        if (localStorage.getItem('includeSentItems') === null) {
            localStorage.getItem('includeSentItems') = $('#includeSentItems')[0].checked;
        }
        else if (localStorage.getItem('includeSentItems') == false) {
            $('#includeSentItems')[0].checked = false;
            pmgListTable.column(1).search('Draft').draw();
        }
        else {
            $('#includeSentItems').bootstrapToggle('on');
            pmgListTable.column(1).search('').draw();
        }

        if (localStorage.getItem('showAllItems') === null) {
            localStorage.getItem('showAllItems') = $('#showAllItems')[0].checked;
        }
        else if (localStorage.getItem('showAllItems') == false) {
            $('#showAllItems')[0].checked = false;
            pmgListTable.column(2).search($('#username')).draw();
        }
        else {
            $('#showAllItems')[0].checked = true;
            pmgListTable.column(2).search('').draw();
        }
    });

    $(function () {
        $('input:checkbox').change(function () {
            var username = $('#username')[0].innerText;
            switch (this.id) {
                case 'includeSentItems':
                    if (this.checked == true) {
                        pmgListTable.column(1).search('').draw();
                    }
                    else {
                        pmgListTable.column(1).search('Sent').draw();
                    }
                    localStorage.setItem("includeSentItems", this.checked);
                    break;

                case 'showAllItems':
                    if (this.checked == true) {
                        pmgListTable.column(2).search('').draw();
                    }
                    else {
                        pmgListTable.column(2).search(username).draw();
                    }
                    localStorage.setItem("showAllItems", this.checked);
                    break;
            }
        })
    })

badbyte

The thing is that:
pmgListTable.column(2).search('').draw();

Won't filter.

colin

Hi @badbyte ,

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

kthorngren

pmgListTable.column(2).search('').draw(); Won't filter.

Correct, that is the same as having an empty search so all the data is matched. You can use a regex search like this to filter all the rows:
pmgListTable.column(2).search('^$', true, false).draw();

or simply
pmgListTable.search('^$', true, false).draw();

Kevin

badbyte

@colin : yes you are right thx.
https://jsfiddle.net/mz35v89a/

@kthorngren :
another thing that I noticed that doesn't work is the second slider. In the jsfiddle link it is the id "includeSentPackages". I don't know y it doesn't work either.

thx in advance

colin

Hi @badbyte ,

Thanks for that test case. There's tons of errors in the console, and the code is in both the JS and the HTML sections so it's going to be executed both times, which is almost definitely not what you want,

Cheers,

Colin

badbyte

Elaborate, what do you mean with 'tons of errors in the console'

kthorngren

In your example open the browser's console. You will see some errors. You also have placed JS code in the JavaScript tab and also the same code in a script tag in the HTML tab. So both will execute.

Please fix these errors and make sure you are replicating your issue so we can help.

Kevin