How to reinitialize custom classes after state has changed?
How to reinitialize custom classes after state has changed?
m0d65537
Posts: 1Questions: 1Answers: 0
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
stateLoadCallback
function too, or possiblyinitComplete
,Colin