Back

Technologies:

javascriptjavascript
jqueryjquery
avatar
Tolerim
24 days ago

When saving column view in jQuery datatable, is the last index deleted?

As a senior JavaScript developer, I'm tasked with keeping track of column states in a jQuery datatable by using the stateSaveCallback. The default datatable has 13 columns, but only 9 of them are shown in the colvis button. My issue is that when I hide a column, the length of the state array decreases by 1. I need the array length to remain constant (13), with hidden column indexes set to false. I've spent a significant amount of time on this problem and would appreciate any help. I attempted to use colvis to toggle between columns in the button, but it didn't solve the issue.
Answers(2)
avatar
Vogi
23 days ago
Verified Answer
It sounds like you're trying to keep track of column states in a jQuery datatable by using the stateSaveCallback. The default datatable has 13 columns, but only 9 of them are shown in the colvis button. When you hide a column, the length of the state array decreases by 1. You need the array length to remain constant (13), with hidden column indexes set to false. One solution is to use the stateSaveParams method to manipulate the data that is actually saved. This method saves the state while stateSaveCallback will load it from where this callback has saved it. Another solution is to ignore state duration by setting "stateDuration": -1 and "visible": false instead of "visible": "false". I hope this helps! Let me know if you have any other questions.

Sources

stateSaveCallback - DataTablesdatatables - Column Visibility is not restored from a saved state via ...Datatable.js stateSaveCallback with Ajax Data - Stack Overflow
avatar
Tolerim
24 days ago
To maintain a constant length of 13 in the array while hiding columns, you can use the fnStateSaveParams function in jQuery DataTables. Here's an example implementation: 
$(document).ready(function() {
  $('#example').DataTable( {
    colReorder: true,
    stateSave: true,
    stateSaveCallback: function(settings,data) {
      localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) );
    },
    stateLoadCallback: function(settings) {
      return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) );
    },
    fnStateSaveParams: function(oSettings, oData) {
        for (var i=0; i<oSettings.aoColumns.length; i++) {
            oData.columns[i].visible = oSettings.aoColumns[i].bVisible;
        }
    },
    fnStateLoadParams: function(oSettings, oData) {
       for (var i=0; i<oSettings.aoColumns.length; i++) {
           oSettings.aoColumns[i].bVisible = oData.columns[i].visible;
       }
    },
    colVis: {
        buttonText: 'Select Columns',
        restore: 'Restore',
        overlayFade: 0,
        exclude: [9,10,11,12],
    }
  });
});
In this example, fnStateSaveParams function is used to save the state of the columns in the data object. For each column, the visible property is set to true or false based on the visibility of the corresponding column. Similarly, fnStateLoadParams function is used to restore the state of the columns from the saved data object. Also, in colVis, excluded the last 4 columns (index 9-12) from the colvis button. This should ensure that the length of the array remains constant at 13, with each element corresponding to the visibility state of each column.
;