How to reinitialize custom classes after state has changed?

How to reinitialize custom classes after state has changed?

m0d65537m0d65537 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);

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    edited March 2021

    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 possibly initComplete,

    Colin

This discussion has been closed.