saveState is not working properly.

george001

Im using this bit of code to save my dtable's state in my database but it doesn't save it. Instead I am getting 0 on the column that
it was supposed to save the table's state.

Why?

//SaveState
            'stateSaveCallback': function(settings, data) {
                $.ajax({
                    'url': 'saveDtableState.php',
                    'data': { 'name': 'resultsTable', 'data': data },
                    'dataType': 'json',
                    'method': 'POST'
                });
            },

PHP

$dataTable_name = $_POST['name'];
 $dataTable_state = $_POST['state'];
 $userID = 'random1';

 if(!empty($userID)){
  $stateSave_query = mysql_query("INSERT INTO $table_name (userID, dtable_name, dtable_state) VALUES ('$userID', '$dataTable_name', '$dataTable_state')")or die(mysql_error());

tangerine

Do you have this

"stateSave": true,

in your DataTable initialization?

george001

@tangerine Yes I do, on the first line!

allan

Happy to take a look at a test case showing the issue. Given that you are defining the stateSaveCallback, I presume you are also defining stateLoadCallback, but that isn't shown above.

Allan

george001

@allan hello, I fixed that problem.. It was a database error. I hadn't included the stateLoadCallback at that time but now that I did it breaks down the whole table.

that is the whole code that i have for my datatable

$('#resultsTable').DataTable({
            "stateSave": true,

            // "serverSide": true,
            //rows per page
            "lengthMenu": [[25, 50, 100, 150, 200, 250, -1],
                           [25, 50, 100, 150, 200, 250, "All"]],
            "dom": '<"top"Bfi>rt<"bottom"lp><"clear">', //show entries on bottom
            //Scrolling table
            "scrollY": 600, //Constrain the DataTable to the given height
            "deferRender": true, //Elements will be created only when the are required
            "scroller": true, //Enable vertical scrolling in DataTables.
            "scrollX": true, //scroll horizontal 
            "colReorder": true, // column reordering
            "buttons": ['colvis'], //enable column visibility button
            //Grouping table 
            "columnDefs": [{ "visible": false, "targets": 0 }], //mades target column hidden //if commented ---> Uncaught TypeError: Cannot read property 'style' of undefined 
            "order": [[0, 'asc']], //sorting based on column            
            "drawCallback": function(settings) { //DataTables' callback function
                var api = this.api(); //give an API instance
                var rows = api.rows({ page: 'current' }).nodes(); //Get the row TR node for the selected row. for current page

                var last = null; //last cell's data that was checked

                var groupName = []; //array for holding the sorting values

                //loops through each cell of column 2 and gets the data of each one
                api.column(0, { page: 'current' }).data().each(function(group, i) {

                    if (last !== group) { ////checds if last cell's data is the same as previous 
                        //counts the rows(i) and adds the group name (i = number of rows, group is the name of each group)
                        $(rows).eq(i).before(
                            '<tr class="group" id="' + i + '" style="font-weight: bold;"><td colspan="5">' + group + '</td></tr>'
                        );
                        groupName.push(i); //push the group's id in the array
                        last = group; //sets the last var to the name of the group that was just checked
                    }
                });
                //iterates through the array
                for (var d = 0; d < groupName.length; d++) {
                    // Code added for adding class to sibling elements as "group_<id>"  
                    $("#" + groupName[d]).nextUntil("#" + groupName[d + 1]).addClass(' group_' + groupName[d]);
                    // Code added for adding Toggle functionality for each group
                    $("#" + groupName[d]).click(function() {
                        var gid = $(this).attr("id");
                        $(".group_" + gid).slideToggle(300);
                    });
                }
            },
            'stateSaveParams.dt': function(e, settings, data) {
                data.search.search = "";
            },

            //SaveState
            'stateSaveCallback': function(settings, data) {;
                $.ajax({
                    'url': 'saveDtableState.php',
                    'data': { name: 'resultsTable', 'state': data },
                    'dataType': 'json',
                    'method': 'POST',
                    "success": function() {},
                    error: function(xhr, ajaxOptions, thrownError) {
                        console.log(thrownError);
                    }
                });
            },
            'stateLoadCallback': function(settings, callback) {
                $.ajax({
                    'url': 'loadDtableState.php',
                    'data': { name: 'resultsTable'},
                    'dataType': 'json',
                    success: function(json) {
                        callback(json);
                    },error: function(xhr, ajaxOptions, thrownError) {
                        console.log(thrownError);
                    }
                });
            },
        });

george001

@allan what happens is that, when I include the stateLoadCallback the datatable becomes a normal table..

george001

found the problem... my back-end was wrong... this is what should look like:

$load_query = mysql_query("query'")or die(mysql_error());
  $results = mysql_fetch_assoc($load_query);
  echo $results['column name']; 

allan

Thanks for posting back. Good to hear you've got it working.

Allan