StateRestore Ajax
StateRestore Ajax
caseys
Posts: 4Questions: 1Answers: 0
I am trying to Save and load states using AJAX and MySQL. I have been able to save the states and load them when the table initializes. When the state is selected it does not seem to apply. Button ColVis also breaks and random columns are added and removed each time you click. Do I need code to handle $_POST['action'] === 'load'?
JS
Table=$('.inv-table').DataTable( {
dom: 'Bfrtip',
stateSave: true,
ajax: {
url: [path to php that makes json],
dataSrc: 'data'
},
buttons: [
"colvis",
'createState',
{
extend: 'savedStates',
config: {
ajax: [ path to php to create, delete, and load ]
}
}
]
} );
json that is used to build table
{
"data": [
[ My Data ]
],
"stateRestore": {
"State 1": {
"time": "1693515171590",
"start": "0",
"length": "10",
"order": [
["0", "asc"]
],
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
},
"columns": [{
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "true",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}, {
"visible": "false",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
}
}],
"stateRestore": {
"isPredefined": "false",
"state": "State 1",
"tableId": "example",
"isPreDefined": "false"
},
"c": {
"_createInSaved": "false",
"ajax": "/pages/data_table_state_save.php?user=caseys&table=inventory",
"create": "true",
"creationModal": "false",
"i18n": {
"creationModal": {
"button": "Create",
"colReorder": "Column Order",
"columns": {
"search": "Column Search",
"visible": "Column Visibility"
},
"length": "Page Length",
"name": "Name:",
"order": "Sorting",
"paging": "Paging",
"scroller": "Scroll Position",
"search": "Search",
"searchBuilder": "SearchBuilder",
"searchPanes": "SearchPanes",
"select": "Select",
"title": "Create New State",
"toggleLabel": "Includes:"
},
"duplicateError": "A state with this name already exists.",
"emptyError": "Name cannot be empty.",
"emptyStates": "No saved states",
"removeConfirm": "Are you sure you want to remove %s?",
"removeError": "Failed to remove state.",
"removeJoiner": " and ",
"removeSubmit": "Remove",
"removeTitle": "Remove State",
"renameButton": "Rename",
"renameLabel": "New Name for %s:",
"renameTitle": "Rename State"
},
"modalCloseButton": "true",
"remove": "true",
"rename": "true",
"save": "true",
"saveState": {
"colReorder": "true",
"columns": {
"search": "true",
"visible": "true"
},
"length": "true",
"order": "true",
"paging": "true",
"scroller": "true",
"search": "true",
"searchBuilder": "true",
"searchPanes": "true",
"select": "true"
},
"splitSecondaries": ["updateState", "renameState", "removeState"],
"toggle": {
"colReorder": "false",
"columns": {
"search": "false",
"visible": "false"
},
"length": "false",
"order": "false",
"paging": "false",
"scroller": "false",
"search": "false",
"searchBuilder": "false",
"searchPanes": "false",
"select": "false"
},
"colReorder": "false",
"columns": {
"search": "true",
"visible": "true"
},
"length": "false",
"order": "false",
"paging": "false",
"scroller": "false",
"search": "true",
"searchBuilder": "true",
"searchPanes": "true",
"select": "false"
}
}
}
}
This question has an accepted answers - jump to answer
Answers
Can you give me a link to a page showing the issue please?
Allan
unfortunately, the site is internal only. When I delete the statesave local storage everything works again. it only breaks when I apply any state.
Console
Local Storage json
Is it possible to create a login for me an PM it to me? I'd need to be able to reproduce the error to be able to diagnose and resolve it. I'm not yet sure how I would do that locally.
Allan
Ok, I was able to reproduce the behavior. Use the colvis button so it creates a state. Then use the hide col buttons. then go back to the colvis buttons and you will notice the checkmarks will show randomly when you click. I was able to fix it by adding a clear state before changing the visibility, but you can't do that with staterestore.
https://live.datatables.net/kanufigu/1/edit?js,output
Thanks!
That isn't valid. It is passing a string to
column()visible(), but that method requires a boolean value.Making that change allows it to work as expected: https://live.datatables.net/kanufigu/2/edit .
Allan
well, I am getting the same issue with state restore. Hopefully, someone comes across this issue who can show you the error. I ended up making my own state restore. Thanks for the help!