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

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

SukhsterSukhster Posts: 4Questions: 2Answers: 0
edited September 2018 in Free community support

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.

This question has accepted answers - jump to:

Answers

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • SukhsterSukhster Posts: 4Questions: 2Answers: 0

    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);
                        },
                    },
    
This discussion has been closed.