diff --git a/assets/controllers/elements/datatables/datatables_controller.js b/assets/controllers/elements/datatables/datatables_controller.js index 25763570..741e334b 100644 --- a/assets/controllers/elements/datatables/datatables_controller.js +++ b/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.'); } diff --git a/config/packages/datatables.yaml b/config/packages/datatables.yaml index 18fbb18d..7f85df10 100644 --- a/config/packages/datatables.yaml +++ b/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"]] diff --git a/templates/components/datatables.macro.html.twig b/templates/components/datatables.macro.html.twig index e7e1cfed..87efc352 100644 --- a/templates/components/datatables.macro.html.twig +++ b/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) %}