SaveState Not Working

RAWaddell

I've been using DataTables for a while and after going live with my app I want to persist the data in the table when the user clicks a button in the table to open a PDF in the browser window, and then clicks the browser's back button - i.e. I want the user to still see the results in the table from the query. I added the SaveState code to my JS file:

    $('#show-entries').DataTable( {
        
        dom: 'Bfrtip',
        stateSave: true,
        buttons: [
            {
                extend: 'csvHtml5', text: 'Export to CSV',
                exportOptions: {
                    columns: [ 1, 2, 5, 6, 3, 4, 14, 15, 8, 16, 
                                17, 18, 9, 19, 10, 11, 20, 12, 21, 22 ]
                }
            },
            {
                extend: 'pdfHtml5', 
                text: 'Open in PDF',
                header: true,
                footer: true,
                title: "WF Online Contest Entries",
                download: 'open',
                orientation: 'landscape',
                pagesize: 'LETTER',
                filename: function(){
                    var d = new Date();
                    var n = d.getTime();
                    return 'WF Online Contest Entries - ' + n;
                },
                extension: '.pdf',
                customize : function(doc) {doc.pageMargins = [10, 10, 10,10 ]; },
                exportOptions: {
                    columns: [ 1, 2, 5, 7, 8, 9, 10, 11, 12 ]
                }
            }
        ],
       
        "language": {
            "search": "Filter records:"
        },
        
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        
        columns: [
           { data: null, title: "Select",                           // 0
                defaultContent: ''},
           { data: "ID", title: "ID" },                             // 1
           { data: "Year", title: "Year" },                         // 2
           { data: "First_Name", title: "First_Name" },             // 3
           { data: "Last_Name", title: "Last_Name" },               // 4
           { data: "Entry_Form_Number", title: "Entry #" },         // 5
           { data: "Barcode_Text", title: "Barcode" },              // 6
           { data: "Entrant_Name", title: "Entrant Name" },         // 7
           { data: "Model_Name", title: "Title or Name of Entry" }, // 8
           { data: "Category_Name", title: "Category" },            // 9
           { data: "Paid", title: "Paid" ,                          // 10
             render: function (data, type, row, meta) {
               if (type === 'display') { 
                 return data === "1" ? 'Y' : 'N';
               }
               return data;
              }
           },
           { data: "DatePaid", title: "Date Paid" },                // 11
           { data: "DateCreated", title: "Date Created" },          // 12
           { data: null, title: "Print",                            // 13
             render: function (data, type, row, meta) {
                return '<input type="button" class="btn-print printrec" id="' + meta.row + '" value="Print"/>';
             }
           },
           { data: "Phone_Num", title: "Phone_Num" },               // 14
           { data: "Email", title: "Email" },                       // 15
           { data: "Remarks", title: "Remarks" },                   // 16
           { data: "Secured_to_Base", title: "Secured_to_Base" },   // 17
           { data: "FK_Category", title: "FK_Category" },           // 18
           { data: "Accept_Agreement", title: "Accept_Agreement" }, // 19
           { data: "CreatedBy", title: "CreatedBy" },               // 20
           { data: "LastUpdatedBy", title: "LastUpdatedBy" },       // 21
           { data: "DateLastUpdated", title: "DateLastUpdated" }    // 22
         ],
        
        "columnDefs": [ 
            {
                defaultContent: '',
                orderable: false,
                className: 'select-checkbox select-enabled',
                targets:   0,
                createdCell: function (td, cellData, rowData, row, col) {
                    if ( rowData.Paid === "1" ) {
                        $(td).removeClass( 'select-enabled' );
                    } else {
                        $(td).addClass( 'select-enabled' );
                    }
                }
            },
            {
                 // Hide 'ID' & 'Year' columns (and others)
                "targets": [ 1, 2, 14, 15, 16, 17, 18, 19, 20, 21, 22 ],
                "visible": false,
                "searchable": false
             },
             {
                 // Hide 'First_Name' & 'Last_Name' columns
                "targets": [ 3, 4 ],
                "visible": false
             },
             {
                 // Limit 'Entrant Name' text length
                "targets": [ 7 ],
                render: function ( data, type, row ) {
                    return type === 'display' && data.length > 43 ?
                        data.substr( 0, 43 ) +'…' :
                        data;       
                }
             },
             {
                 // Limit 'Title of Entry' text length
                "targets": [ 8 ],
                render: function ( data, type, row ) {
                    return type === 'display' && data.length > 100 ?
                        data.substr( 0, 97 ) +'…' :
                        data;       
                }
             },
            { className: "dt-center", "targets": [ 10 ] }
        ],
        
        select: {
            style: 'multi',
            selector: '.select-enabled',
            info: true
        },
        
        order: [[ 1, 'asc' ]]
     } );

But when I return to the page it still blanks out as before. What am I doing wrong? I don't have a $('#show-entries').DataTable().clear().draw() call in my $(document).ready(function().

allan

Thanks for your question. I'm happy to take a look at a test case showing the issue. I don't immediately see anything wrong with the code above.

Allan

RAWaddell

Thanks Allan. How do I show you a test case? Right now, this is only on my local dev machine.

colin

Hi @RAWaddell ,

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

RAWaddell

Thanks Colin. The difficulty is with showing the data - I'm using an Ajax call to a PHP script to return the table results based on search criteria entered by the user. How can I show this issue when any of the options listed won't be able to access my local database? Would a recording work instead?

allan

Can you use this example as the basis with which to build an example showing the problem you are seeing?

Allan

RAWaddell

Is the Ajax call getting data from a .csv file or something similar? Can I see what is in "/ajax/objects.txt"?

Here's my full code to setup DT. Does it matter that it's within the $(document).ready(function)?

$(document).ready(function() {

    var tblDT;

    // Read stored session value (if exists)
    var paidStatusVal = sessionStorage.getItem('paidStatusVal');

    // Maintain state of 'paidStatus' form field value after opening a PDF
    // and navigating back to search form
    console.log ('paidStatusVal: ' + paidStatusVal);
    switch(paidStatusVal) {
        case "NotPaid":
            document.searchForm.paidStatus[2].checked=true;
            break;
        case "Paid":
            document.searchForm.paidStatus[1].checked=true;
            break;
        default:
            document.searchForm.paidStatus[0].checked=true;
    }    



    // Code to show spinning GIF for any Ajax call
    $body = $("body");

    $(document).on({
        ajaxStart: function() { $body.addClass("loading");    },
         ajaxStop: function() { $body.removeClass("loading"); }    
    });
    
    $('#show-entries').DataTable( {
        
        dom: 'frtipB',
        stateSave: true,
        buttons: [
            {
                extend: 'csvHtml5', text: 'Export to CSV',
                exportOptions: {
                    columns: [ 1, 2, 5, 6, 3, 4, 14, 15, 8, 16, 
                                17, 18, 9, 19, 10, 11, 20, 12, 21, 22 ]
                }
            },
            {
                extend: 'pdfHtml5', 
                text: 'Open in PDF',
                header: true,
                footer: true,
                title: "WF Online Contest Entries",
                download: 'open',
                orientation: 'landscape',
                pagesize: 'LETTER',
                filename: function(){
                    var d = new Date();
                    var n = d.getTime();
                    return 'WF Online Contest Entries - ' + n;
                },
                extension: '.pdf',
                customize : function(doc) {doc.pageMargins = [10, 10, 10,10 ]; },
                exportOptions: {
                    columns: [ 1, 2, 5, 7, 8, 9, 10, 11, 12 ]
                }
            }
        ],
       
        "language": {
            "search": "Filter records:"
        },
        
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        
        columns: [
           { data: null, title: "Select",                           // 0
                defaultContent: ''},
           { data: "ID", title: "ID" },                             // 1
           { data: "Year", title: "Year" },                         // 2
           { data: "First_Name", title: "First_Name" },             // 3
           { data: "Last_Name", title: "Last_Name" },               // 4
           { data: "Entry_Form_Number", title: "Entry #" },         // 5
           { data: "Barcode_Text", title: "Barcode" },              // 6
           { data: "Entrant_Name", title: "Entrant Name" },         // 7
           { data: "Model_Name", title: "Title or Name of Entry" }, // 8
           { data: "Category_Name", title: "Category" },            // 9
           { data: "Paid", title: "Paid" ,                          // 10
             render: function (data, type, row, meta) {
               if (type === 'display') { 
                 return data === "1" ? 'Y' : 'N';
               }
               return data;
              }
           },
           { data: "DatePaid", title: "Date Paid" },                // 11
           { data: "DateCreated", title: "Date Created" },          // 12
           { data: null, title: "Print",                            // 13
             render: function (data, type, row, meta) {
                return '<input type="button" class="btn-print printrec" id="' + meta.row + '" value="Print"/>';
             }
           },
           { data: "Phone_Num", title: "Phone_Num" },               // 14
           { data: "Email", title: "Email" },                       // 15
           { data: "Remarks", title: "Remarks" },                   // 16
           { data: "Secured_to_Base", title: "Secured_to_Base" },   // 17
           { data: "FK_Category", title: "FK_Category" },           // 18
           { data: "Accept_Agreement", title: "Accept_Agreement" }, // 19
           { data: "CreatedBy", title: "CreatedBy" },               // 20
           { data: "LastUpdatedBy", title: "LastUpdatedBy" },       // 21
           { data: "DateLastUpdated", title: "DateLastUpdated" }    // 22
         ],
        
        "columnDefs": [ 
            {
                defaultContent: '',
                orderable: false,
                className: 'select-checkbox select-enabled',
                targets:   0,
                createdCell: function (td, cellData, rowData, row, col) {
                    if ( rowData.Paid === "1" ) {
                        $(td).removeClass( 'select-enabled' );
                    } else {
                        $(td).addClass( 'select-enabled' );
                    }
                }
            },
            {
                 // Hide 'Select', 'ID' & 'Year' columns (and others)
                "targets": [ 0, 1, 2, 14, 15, 16, 17, 18, 19, 20, 21, 22 ],
                "visible": false,
                "searchable": false
             },
             {
                 // Hide 'First_Name' & 'Last_Name' columns
                "targets": [ 3, 4 ],
                "visible": false
             },
             {
                 // Limit 'Entrant Name' text length
                "targets": [ 7 ],
                render: function ( data, type, row ) {
                    return type === 'display' && data.length > 43 ?
                        data.substr( 0, 43 ) +'…' :
                        data;       
                }
             },
             {
                 // Limit 'Title of Entry' text length
                "targets": [ 8 ],
                render: function ( data, type, row ) {
                    return type === 'display' && data.length > 100 ?
                        data.substr( 0, 97 ) +'…' :
                        data;       
                }
             },
            { className: "dt-center", "targets": [ 10 ] }
        ],
        
        select: {
            style: 'multi',
            selector: '.select-enabled',
            info: true
        },
        
        order: [[ 1, 'asc' ]]
     } );

    tblDT = $('#show-entries').DataTable();

    var isAdmin = document.getElementById('isAdmin').value;
    //console.log ('isAdmin: ' + isAdmin);
    if(isAdmin === "1"){
        // User is an Admin, so enable controls for them
        //document.getElementById("contest-year").disabled = false;
        $('#contest-year').prop('disabled', false);
        
        tblDT.button( 0 ).enable( true );
        tblDT.button( 1 ).enable( true );
        //console.log('Buttons 0 and 1 should be ENABLED');
    }else {
        // User is **NOT** and Admin, so disable these controls
        //document.getElementById("contest-year").disabled = true;
        $('#contest-year').prop('disabled', true);
        
        tblDT.button( 0 ).enable( false );
        tblDT.button( 1 ).enable( false );
        //console.log('Buttons 0 and 1 should be DISABLED')
    }

    // If user deslects an individual row, blank out 'Select all'
    // checkbox
    tblDT.on( 'deselect', function ( e, dt, type, indexes ) {
        if ( type === 'row' ) {
            //var data = tblDT.rows( indexes ).data();
            //console.log('Deselect action; ID:' + data.ID);
            // Uncheck 'Select all' control after processing paid records
            $("#selectAll").prop("checked", false);  
        }
    } );

colin

You can use type that into path the URL to see the file's contents: http://live.datatables.net//ajax/objects.txt

Bear in mind that stateSave only saves the state (ordering, filtering, etc.) and not the data. So depending on how the data is loaded, the table may be empty upon return,

C

RAWaddell

Got it - thanks Colin. I think what I'll do is add a call to populate the table on page load/refresh. On the first time, the search criteria will be blank so no records will be shown, but since the search fields aren't blanked out when navigating to another page and back again then hopefully it will requery with the same search criteria; to the end user, it should look the same as before they navigated away.