2

I want my user's column selections in Datatables to be retained with checkboxes. Datatables saveState does a great job with the table, but my external checkboxes are not in that function.

This image is the desired effect. ( Repeating Button text is unrelated.) These are Bootstrap checkboxes. I'd like when the user comes back and the table saved state is loaded, that the proper boxes are marked showing what other columns are available to show.

Checkbox Column Visibility

$('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();

    // Get the column API object
    var column = table.column( $(this).attr('data-column') );

    // Toggle the visibility
    column.visible( ! column.visible() );
} );

I started with this code above at Datatables, but I have no idea how to relate the boxes to the stateSave. It there a Datatables solution or am looking for a custom solution?

zzipper72
  • 945
  • 2
  • 10
  • 24
  • For state which is not controlled by DataTables (for example, your custom checkboxes), you can use the same approach that DataTables uses, and store your data in your browser's [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). You can see what's in your local storage via the browser developer tools (F12). Some sample code is [here](https://developer.mozilla.org/en-US/docs/Web/API/Storage). – andrewJames Feb 20 '21 at 14:27
  • You can update your saved state using [events](https://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event). You can then use the DataTables [`initComplete`](https://datatables.net/reference/option/initComplete) function to restore that state from storage. – andrewJames Feb 20 '21 at 14:28

0 Answers0