How to reinitialize custom classes after state has changed?
How to reinitialize custom classes after state has changed?
New to data tables, got an assignment to save hidden/visible column to our backend.
The problem is when I load the saved state, custom classes that our added outside of the datatable class disappear.
Any ideas on how to get custom classes to reload?
var table = $('.table').DataTable( {
initComplete: function (settings, json) {
$(".table").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
"order": [[ 3, "desc" ]],
"pageLength": 20,
"dom": '<"toolbar">frtip',
"columns": [
{ "data": "id" },
{ "data": "value1", className: "dt-right" },
{ "data": "value2", className: "dt-right" },
{ "data": "value3", className: "dt-right" }
],
"searching": true,
"stateSave": true,
// Ignore state duration
"stateDuration": -1,
stateLoadCallback: function (settings, callback) {
$.ajax( {
url: 'load_user_data/',
dataType: 'json',
success: function (json) { callback( json ) }
});
},
stateLoadParams: function (settings, data) {
data.search.search = "test";
},
stateSaveCallback: function(settings, data) {
json = JSON.stringify(data);
$.ajax({
headers: {'X-CSRFToken': csrftoken},
url: "save_user_data/",
data: { 'data': json },
dataType: "json",
type: "POST",
success: function() {}
});
}
});
// a bunch of custom classes start here:
$("#date-picker").change(function() { ...
$('#reportrange-start, reportrange-end').daterangepicker({ ...
$('#reportrange-start span').html(startDate.format('MMMM D, YYYY'));
$('#reportrange-end span').html(endDate.format('MMMM D, YYYY'));
$("input[name='regions']").change(loadData);
This discussion has been closed.
Answers
Because of the async nature of the ajax cal in
stateLoadCallback, your bottom code would likely be called before the Ajax function completes.You could move that class code either into the
stateLoadCallbackfunction too, or possiblyinitComplete,Colin