Can't get deep linking working together with other options

zthomas

I have a very simple working implementation of DataTables using just the below.

$(document).ready( function () {
        $('#status_table').DataTable( {
        paging: false,
        scrollY: '80%',
        stateSave: true,
        layout: {
                topStart: {
                        buttons: [
                                {
                                        text: "Share",
                                        action: urlUpdate
                                }
                                ]
                }
        }
} ) } );

I want to add deep linking (purely for the ability to share direct links, what I'm building is not accessible from the web) but I am not finding success. I followed the original article here and found this forum post that seems to be the same issue I have, and neither of them work out for me. I can get deep linking working if I use just that as described in the basic example on the original blog post, but I also want the custom button I defined plus all of the other configs. The last thing I tried is the below which throws no errors, and all of my configs are there and working, but deep linking does not.

var deeplink = $.fn.dataTable.ext.deepLink( [ 'search.search' ] );
var options = {
        paging: false,
        scrollY: '80%',
        stateSave: true,
        layout: {
                topStart: {
                        buttons: [
                                {
                                        text: "Share",
                                        action: urlUpdate
                                }
                                ]
                }
        }
}
var config = $.extend(options, deeplink)

console.log(window.location.href);

$(document).ready( function () {
        $('#status_table').DataTable(config);
});

Any help would be greatly appreciated!

kthorngren

Are you trying to use the urlUpdate function to generate a sharable link that can be used as part of deeplinking? If yes then you will be interested in this thread. There is a lot going in in the thread but this test case will show one option for generating a sharable link:
https://live.datatables.net/rosekuku/1/edit

If this doesn't help then please provide a simple test case with an example of your urlUpdate function so we can help debug. You can start with this:
https://live.datatables.net/

Kevin

zthomas

Thanks for the quick response! Honestly I am a complete notice (this is literally my first use of javascript, html, or css at all) so that forum post you linked was hard for me to follow. I copied my use case (except for the actual table definition as that is many thousands of lines long and contains PII, the example provided by default will do) here and it seems to function the same way there as it does for me on my instance although I'm not really sure that the issue I'm seeing can be simulated in that test environment. The example I have I commented out the actual code history.replaceState(null, '', newUrl); and added a simple console log. This functionality works fine for me locally as well. What does not work is adding ?search.search=Edinburgh and have that actually populate into the search bar.

allan

stateSave: true,

This might be what is messing you up. It certainly took me a moment to realise what is happening.

The search property is being applied in the configuration object for the code in your example, but it is being overridden by a saved state! So if you have a state which is already in place, then that will be loaded in and used. That's the whole point of state saving of course!

To test, try disabling stateSave on your page and see if the search url then works.

Allan

zthomas

It works! Thanks Allan, what a silly little thing (just like I assumed it would be) to cause me so much trouble. That said, I would like to still have the state saved somehow, as the data is not updated asynchronously on the page. That means when people go to refresh their search terms will get lost which is not ideal.

I do hope to implement ajax in order to load data without needing a refresh, but I'm not there yet

kthorngren

You can use stateSave and search.search with deep linking. Use stateLoadParams to remove the saved search term if search.search is in the url, for example:

  stateLoadParams: function (settings, data) {
    if (search !== null) {
      console.log('Remove saved search term');
      delete data.search.search;
    }
  },

https://live.datatables.net/widofuqi/1/edit

To test it you will need to use the "Live preview" mode. Click the upward right arrow in the Javascript tab:

Try this URL:

https://live.datatables.net/widofuqi/1?search.search=z

Kevin

zthomas

Thanks kthorngren, but looking more at my use case I don't really think refreshing is a realistic use case anyway since I am dynamically modifying the URL bar. It would just load whatever search was last "shared" when you try to refresh. I guess I need to move dynamic loading with ajax up on my priority list!

Thanks again everyone, I'll mark this as answered.

allan

Nice one Kevin - that looks like a good solution.

Dynamically modifyin the URL bar would cause some issues I suppose - it depends how you are doing that and how that would then mean you need to hook into the DataTable. You might need to modify the deep linking plug-in in some way - e.g. to use a localStorage value rather than the location query string.

Allan