Can't get deep linking working together with other options
Can't get deep linking working together with other options
![zthomas](https://secure.gravatar.com/avatar/437694d09611c69c0c928385c03cc94f/?default=https%3A%2F%2Fvanillicon.com%2F437694d09611c69c0c928385c03cc94f_200.png&rating=g&size=120)
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!
This question has an accepted answers - jump to answer
Answers
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
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.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
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![:smile: :smile:](https://datatables.net/forums/resources/emoji/smile.png)
You can use
stateSave
andsearch.search
with deep linking. UsestateLoadParams
to remove the saved search term ifsearch.search
is in the url, for example: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
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.
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