State Saving Issue

State Saving Issue

GstgGstg Posts: 66Questions: 4Answers: 0
edited December 2021 in DataTables

I've been working with Allan and our site is going great. Our site uses a ton of custom filters utilizing the "stateSave: true" feature. All of them seem to work except one of them, the "Any Day" filter. I can't seem to find out why that one is not working. I have open credits available on my account and have not been able to get in contact with Allan recently. I would be very thankful to anyone who might see what is going wrong with the one filter save state. Unique Events, My Events, Charity Events, and Free all seem to work properly and save the state. Interests, Following are also not working. Thanks again for all the help.

The following is the code segment:

                buttons: [
                    {
                        extend: 'collection',
                        name: 'filter',
                        text: 'Filter',
                        buttons: [
                            {
                                text: 'Any Day',
                                name: 'any_day',
                                action: function () {
                                    var that = this;

                                    if (anyDay) {
                                        anyDay = false;

                                        this.active(false);
                                        this.ajax.reload();
                                    }
                                    else {
                                        anyDay = true;

                                        this.active(true);
                                        this.ajax.reload();
                                    }
                                }
                            },
                        {
                            text: 'Unique Events',
                            init: function (dt) {
                                var col = dt.column(7);

                                if (col.search()) {
                                    this.active(true);
                                }
                            },
                            action: function (e, dt) {
                                var col = dt.column(7);

                                if (col.search()) {
                                    col.search('').draw();
                                    this.active(false);
                                }
                                else {
                                    col.search('N').draw();
                                    this.active(true);
                                }
                            }
                        },
                        {
                            text: 'My Events',
                            init: function (dt) {
                                var col = dt.column(7);

                                if (col.search()) {
                                    this.active(true);
                                }
                            },
                            action: function (e, dt) {
                                var col = dt.column(7);

                                if (col.search()) {
                                    col.search('').draw();
                                    this.active(false);
                                }
                                else {
                                    col.search('N').draw();
                                    this.active(true);
                                }
                            }
                        },
                            {
                                text: 'Interests',
                                name: 'interests',
                                action: function () {
                                    var that = this;

                                    if (this.active()) {
                                        searchKeywords = null;

                                        this
                                            .active(false)
                                            .draw();

                                        changeFilterState(table3);
                                    }
                                    else {
                                        searchKeywords = new RegExp(
                                            createSearch(<?php echo json_encode($_SESSION['key_words']);?>, false, true),
                                            'i'
                                        );

                                        this
                                            .active(true)
                                            .processing(false)
                                            .draw();
                                        
                                        changeFilterState(table3);
                                    }
                                }
                            },
                        {
                            text: 'Following',
                            name: 'following',
                            action: function () {
                                var that = this;

                                if (this.active()) {
                                    followingIds = null;
                                    this.active(false).draw();
                                    changeFilterState(table3);
                                }
                                else {
                                    this.processing(true);

                                    $.ajax({
                                        url: '/DataTables/ajax_following.php',
                                        dataType: 'json',
                                        success: function (json) {
                                            followingIds = [];

                                            for (var i=0; i<json.data.length; i++) {
                                                followingIds.push(json.data[i].following_user_id);
                                            }

                                            that.active(true).draw();
                                            that.processing(false);
                                            changeFilterState(table3);
                                        }
                                    })
                                }
                            }
                        },
                        {
                            text: 'Charity Events',
                            init: function (dt) {
                                var col = dt.column(11);

                                if (col.search()) {
                                    this.active(true);
                                }
                            },
                            action: function (e, dt) {
                                var col = dt.column(11);

                                if (col.search()) {
                                    col.search('').draw();
                                    this.active(false);
                                }
                                else {
                                    col.search('Y').draw();
                                    this.active(true);
                                }
                            }
                        },
                        {
                            text: 'Free',
                            init: function (dt) {
                                var col = dt.column(3);

                                if (col.search()) {
                                    this.active(true);
                                }
                            },
                            action: function (e, dt) {
                                var col = dt.column(3);

                                if (col.search()) {
                                    col.search('').draw();
                                    this.active(false);
                                }
                                else {
                                    col.search('$0').draw();
                                    this.active(true);
                                }
                            }
                        }
                    ]
                },
                {
                    extend: 'collection',
                    align: 'button-right',
                    text: 'Display',
                    buttons: [
                    {
                        text: 'List View',
                    action: function () {
                        $('#sort_table3').css('display', 'none');
                        $('#sort_grid3').css('display', 'none');
                                $('#sort_list3').css('display', 'grid');
                        table3.state.save();
                        }
                    },
                    {
                        text: 'Table View',
                        action: function () {
                        $('#sort_table3').css('display', 'table');
                        $('#sort_grid3').css('display', 'none');
                        $('#sort_list3').css('display', 'none');
                        table3.state.save();
                                                 }
                    },
                    {
                        text: 'Grid View',
                        action: function () {
                        $('#sort_table3').css('display', 'none');
                        $('#sort_grid3').css('display', 'grid');
                            $('#sort_list3').css('display', 'none');
                        table3.state.save();
                                                 }
                    },
                    {
                        popoverTitle: 'Visibility control',
                align: 'button-right',
                        extend: 'colvis',
                        postfixButtons: [ 'colvisRestore' ]
                    },
                    {
            align: 'button-right',
                        extend: 'pageLength',
                     }
                ]
              }
            ],
            order: [[5, 'asc' ], [ 6, 'asc' ]],
            stateSave: true,
            stateSaveParams: function (s, data) {
                // Store state of table / grid views
                data.displayTable = $('#sort_table3').css('display');
                data.displayGrid = $('#sort_grid3').css('display');
                data.displayList = $('#sort_list3').css('display');

                // Remove search - session storage is used
                delete data.search;
            }
        });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,301Questions: 26Answers: 4,946
    Answer ✓

    I see an Any Day button that sets a boolean variable then performs an ajax.reload(). Is the anyDay value used as part of the ajax.data?

    You aren't performing any searches, ie search() or column().search(), with this button like the other Unique Events, My Events, Charity Events, and Free buttons. So there is nothing Datatables will save by default.

    What are you expecting to happen?

    If you want the anyDay value to be saved and used on subsequent page loads then you probably want to store the value yourself so it can be loaded before Datatables is intiialized. Maybe this w3schools tutorial will help.

    Kevin

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin
    Answer ✓

    Holding my hands up - sorry for the massive delayed reply to our e-mail support thread @Gstg! I've replied now.

    And Kevin - seriously epic. You've hit the nail on the head with seeing only part of the code. The anyDay parameter did indeed need to be state saved and then restored.

    Allan

  • GstgGstg Posts: 66Questions: 4Answers: 0

    Thank so much for the help Kevin and Allan. You guys are amazing with the support you offer on this board! My hat is off to both of you 8-)

Sign In or Register to comment.