Persist column visibility and ordering across requests and different parts tables.

assets/controllers/elements/datatables/datatables_controller.js

@@ -23,9 +23,33 @@ export default class extends Controller {
 
     static targets = ['dt'];
 
+    static values = {
+        stateSaveTag: String
+    };
+
     /** The datatable instance associated with this controller instance */
     _dt;
 
+    getStateSaveKey() {
+        let key = 'dt_state_'
+
+        if(this.stateSaveTagValue) { //If a tag is provided, use it to store the state
+            key += this.stateSaveTagValue;
+        } else { //Otherwise generate one from the current url
+            key += window.location.pathname;
+        }
+
+        return key;
+    }
+
+    stateSaveCallback(settings, data) {
+        localStorage.setItem( this.getStateSaveKey(), JSON.stringify(data) );
+    }
+
+    stateLoadCallback(settings) {
+        return JSON.parse( localStorage.getItem(this.getStateSaveKey()) );
+    }
+
     connect() {
         //$($.fn.DataTable.tables()).DataTable().fixedHeader.disable();
         //$($.fn.DataTable.tables()).DataTable().destroy();
@@ -55,6 +79,9 @@ export default class extends Controller {
                 }],
                 select: this.isSelectable(),
                 rowCallback: this._rowCallback.bind(this),
+                stateSave: true,
+                stateSaveCallback: this.stateSaveCallback.bind(this),
+                stateLoadCallback: this.stateLoadCallback.bind(this),
             })
             //Register error handler
             .catch(err => {
@@ -78,46 +105,6 @@ export default class extends Controller {
         promise.then(this._afterLoaded.bind(this));
 
 
-
-        //Register links.
-        /*promise.then(function() {
-
-            //Set the correct title in the table.
-            let title = $('#part-card-header-src');
-            $('#part-card-header').html(title.html());
-            $(document).trigger('ajaxUI:dt_loaded');
-
-
-            if($table.data('part_table')) {
-                //@ts-ignore
-                $('#dt').on( 'select.dt deselect.dt', function ( e, dt, items ) {
-                    let selected_elements = dt.rows({selected: true});
-                    let count = selected_elements.count();
-
-                    if(count > 0) {
-                        $('#select_panel').removeClass('d-none');
-                    } else {
-                        $('#select_panel').addClass('d-none');
-                    }
-
-                    $('#select_count').text(count);
-
-                    let selected_ids_string = selected_elements.data().map(function(value, index) {
-                        return value['id']; }
-                    ).join(",");
-
-                    $('#select_ids').val(selected_ids_string);
-
-                } );
-            }
-
-            //Attach event listener to update links after new page selection:
-            $('#dt').on('draw.dt column-visibility.dt', function() {
-                //ajaxUI.registerLinks();
-                $(document).trigger('ajaxUI:dt_loaded');
-            });
-        });*/
-
         console.debug('Datatables inited.');
     }
 

config/packages/datatables.yaml

@@ -3,6 +3,9 @@ datatables:
 
     language_from_cdn: false
 
+    # Set to none, as we override the bundle mechanism with our own custom one
+    persist_state: none
+
     # Set options, as documented at https://datatables.net/reference/option/
     options:
         lengthMenu : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]

templates/components/datatables.macro.html.twig

@@ -1,4 +1,4 @@
-{% macro datatable(datatable, controller = 'elements/datatables/datatables') %}
+{% macro datatable(datatable, controller = 'elements/datatables/datatables', state_save_tag = null) %}
     <div {{ stimulus_controller(controller) }} data-dt-settings='{{ datatable_settings(datatable)|escape('html_attr') }}' data-dt-url="{{ app.request.requestUri }}">
         <div {{ stimulus_target(controller, 'dt') }}>
             <div class="card-body">
@@ -17,9 +17,9 @@
     {{ _self.datatable(dt, 'elements/datatables/log') }}
 {% endmacro %}
 
-{% macro partsDatatableWithForm(datatable) %}
+{% macro partsDatatableWithForm(datatable, state_save_tag = 'parts') %}
     <form method="post" action="{{ path("table_action") }}"
-            {{ stimulus_controller('elements/datatables/parts') }} data-dt-settings='{{ datatable_settings(datatable)|escape('html_attr') }}' data-dt-url="{{ app.request.requestUri }}"
+            {{ stimulus_controller('elements/datatables/parts', {"stateSaveTag": state_save_tag}) }} data-dt-settings='{{ datatable_settings(datatable)|escape('html_attr') }}' data-dt-url="{{ app.request.requestUri }}"
             {{ stimulus_action('elements/datatables/parts', 'confirmDeletionAtSubmit') }}  data-delete-title="{% trans %}part_list.action.delete-title{% endtrans %}"
           data-delete-message="{% trans %}part_list.action.delete-message{% endtrans %}">
         <input type="hidden" name="_token" value="{{ csrf_token('table_action') }}">