Checkbox to hide/ unhide rows in the table (after Ajax Request)

Sukhster

Hi,

I love the datatables framework, but have used it for very standard things so far. I am currently stuck trying to implement a Check box which will hide/ unhide rows in a populated Data Table (via a periodic Ajax.reload()) based on a search in a specific column.

After reviewing the API and other forum items, it looks like l need the columns.search functionality.

               var eventTable = $('#event-table').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": {
                        url: '<?php echo $_SERVER['PHP_SELF']; ?>',
                        method: "POST",
                        data: {

                . ..  . .... ... other code .........
                // Set the Interval Poller
                setInterval(function () {
                    eventTable.ajax.reload();
                    // Set the time inside the browser
                    var localTime = getLocalBrowserTimeAsString();
                    $('#last_refreshed_time').text(localTime);
                }, <?php echo $AUTO_REFRESH_PERIOD * 1000; ?>);

                // Set the Hide completed Event listenter
                $('#hide_completed').change(function () {
                    if (this.checked) {
                        //  NOT WORKING - DOES NOTHING
                        eventTable.column(0).search('WEST').draw();
                    } else {
                        //  NOT WORKING - DOES NOTHING
                        eventTable.column(0).search('EAST').draw();
                    }
                });

I used both column(0).search and columns(0).search, but neither appear to do anything and there are no javascript exceptions being thrown.

Three questions:

1) what am l doing wrong above?
2) how would l use the RegEx functionality to search for anything not equal to 'WEST'?
3) how do l hold state, so that when the Ajax.reload() request happens, that the checkbox-filter remains?

Any help that you can provide would be gratefully appreciated .. since l am tearing my hair out .. trying to get this done.

chessGuru64

I dont know the answer but your ajax.php page would probably help. This might help some too: https://stackoverflow.com/questions/52209578/table-ajax-reload-not-triggering-after-success-function/52210072#52210072

kthorngren

Since you are using server side processing your server script is responsible for searching column 0.

I took your code snippets and put them in this test case for you:
http://live.datatables.net/xolayebi/1/edit

Made a couple slight modifications:
- searches column 2
- search for accountant if checked or all if not checked

This is working along with the ajax.reload.

Maybe you can provide a link to your page for troubleshooting or update this test case.

Kevin

Sukhster

Hi,

Many thanks for all of your prompt responses, and especially the example which kthorngren provided.

I rewrote the code again, and Column search does work. For anybody who looks at this response in the future, here are the answers to the above.

1) what am l doing wrong above?
Not sure - use the example provided in the response.

2) how would l use the RegEx functionality to search for anything not equal to 'WEST'?
^((?!WEST).)*$

3) how do l hold state, so that when the Ajax.reload() request happens, that the checkbox-filter remains?
Added a function to the ajax request when the table is first created, and thus the function will always run and check the value of the checkbox when executed.

                "ajax": {
                    url: '<?php echo $_SERVER['PHP_SELF']; ?>',
                    method: "POST",
                    data: function (d) {
                        d.sc_action = 'ajax';
                        d.sql_query_type = 'events';
                        . . . 
                        d.hide_completed = ($('#hide_completed').is(':checked') ?
                                $('#hide_completed').val() : null);
                    },
                },