Laravel-datatables: [Feat.Req./Question] Pagination should add a get param of the current page and sort, so that i can return to the page I left after clicking on an element.

[vogtdominikgit]

Is it possible to add GET params to the URL for current page and sorting of specific col, so that i can return to the page I left, after I have clicked on a specific row to visit the elements page?

Would love to see this feature so that the users workflow is more flexible. Currently the user has to open the elements page in a new tab to not lose his current position in the datatable.

Regards Dominik

[yajra]

You can use saveState option of DataTables. Just set saveState: true on your js.

[vogtdominikgit]

Thank you for your time and answer! Sadly it didnt work for me. After adding saveState: true to the JS, I tried to go to the second page of DataTables and push on a link inside the datatables. This directed me to the page. After clicking the browser back button, i got directed to the first page.

Here is my JS:

            $('#profiles-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! route('admin.profiles.index.data') !!}',
                saveState: true,
                columns: [
                    { data: 'id', name: 'profiles.id' },
                    { data: 'mac_address', name: 'devices.mac_address' },
                    { data: 'manufacturer', name: 'devices.manufacturer' },
                    { data: 'description', name: 'profiles.description' },
                    { data: 'created_at', name: 'profiles.created_at', searchable: false },
                    { data: 'last_login', name: 'last_login', searchable: false },
                    { data: 'login_count', name: 'login_count', searchable: false },
                    { data: 'visited_client_locations_count', name: 'visited_client_locations_count', searchable: false },
                    { data: 'started_advertisements_count', name: 'started_advertisements_count', searchable: false },
                    { data: 'ended_advertisements_count', name: 'ended_advertisements_count', searchable: false },
                    { data: 'show', name: 'show', orderable: false, searchable: false }
                ]
            });

Do I also need to enable it on serverside?

[yajra]

saveState is on the client-side, no need to enable on server-side.

That's odd cause I have save state of one of my app and it's saving the state, pagination, search & sort of DT. Maybe a browser issue on local storage? Anyways, I think this issue is on js/client side.

[vogtdominikgit]

So the URL should be reformatted after editing search/sort/pagination? Or how does it work in general?

[yajra]

AFAIK, it would save the state of your current DT settings which includes all stuffs related to search, sort & paging. When the page is loaded again, it will first check the local storage, if data is available, it will initialize DT using the settings from local storage.

[vogtdominikgit]

Tried printing

...
                stateSaveCallback: function (settings, data) {
                    console.log(settings, data);
                },
                stateLoadCallback: function (settings) {
                    console.log(settings);
                },
...

No logs though. Really odd.

[vogtdominikgit]

Go it! The problem was to add stateSave: true instead of saveState: true

[yajra]

Oh my bad, I remembered it the other way around. 👍

[vogtdominikgit]

Still no luck though. But it helped me a lot, now i can investigate even further. Thanks a lot.

I will post the final solution and then close the Issue.

[vogtdominikgit]

So the final solution is to remove stateSaveCallback: function(..) and stateLoadCallback: function(..). It seems that it will prevent the local saving and loading, when these attributes are set.