is there a way to generate a sharable link for datatable that uses searchPane, a code ex. would help

tseonez

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

colin

It would be worth looking at this blog post - it's showing deep linking into a DataTable. You could probably extend that approach to include a pre-selected SearchPane.

Colin

rf1234

Thanks for sharing, Colin! Looks like a good solution.

I built something like that myself. A button that generates a hyperlink for the selected record ("parentSerial"). This hyperlink works also if you're not logged in. You are asked for your login credentials and then you continue to the linked contract. The button itself is just the font awesome link symbol. No button text needed.

//custom button to copy a hyperlink of the selected contract to the clipboard
$.fn.dataTable.ext.buttons.clipboard = {
    extend: 'edit',
    text: '',
    className: 'fa fa-link button-fa-icon',
    action: function ( e, dt, button, config ) {
        var txt = encodeURI(window.location.href.split('_ser_')[0] + '_ser_' + parentSerial);
        navigator.clipboard.writeText(txt);
        var msg = lang === 'de' ? 
            'Dieser Hyperlink zum ausgewählten Vertrag \n\
             wurde in Ihre Zwischenablage kopiert:' :
            'This hyperlink to the selected contract \n\
             was copied to your clipboard:';
        setTimeout(function(){
            swal({
                title: lang === 'de' ? 'Hyperlink kopiert!' : 'Hyperlink copied!',
                text: msg + " \n\ \n\ " + txt,
                customClass: 'swal-x-wide',
                type: ''
            });
        }, 100)
    }
};

Then after clicking the link, on "init" of the respective data table this is being done. Does the string ser exist in the url? If so get the contract serial from the url and search for it. Also make the search field blink for some seconds to make sure the user notices what's going on.

table
    .on ('init', function () {     
        var url = window.location.href;
        var pos = url.indexOf('_ser_');        
        if ( pos >= 0 ) {
            var serial = decodeURI(url.substr(pos+5));
            setTimeout(function () {
                table.search(serial).draw();
                $('div.dataTables_filter').addClass('blink');
            }, 200);
            setTimeout(function () {
                 $('div.dataTables_filter').removeClass('blink');
            }, 7000);
        }
    })

This is the structure of the hyperlink:
https://www.yourSite.eu/?page=yourPage_ser_123456789

tseonez

Thank you @colin and @rf1234 Colin, can I use deeplink to provide the custom filters for searchPane? and also would it allow me to generate a unique url based on what users select on the searchPane

I tried modifying this example https://live.datatables.net/lacavubu/8/edit
with the code provided by rf1234. its not working from me

tseonez

on second try. I actually understand now how I can use deeplink and preselect for datable that includes searchPane. https://live.datatables.net/zavesehi/1/edit.

I don't know how to generate the unique url for the selected filter values still?

kthorngren

I used the deeplink pligin Colin linked to using the preselect example in this test case:
https://live.datatables.net/zidaqike/1/edit

Test it with this URL:

https://live.datatables.net/zidaqike/1?searchPanes.preSelect=[{"rows":["Edinburgh","London"],"column":2}]

Note the value on the right of the = needs to be a valid JSON string not a Javascript object. Meaning the object keys need double quotes.

Kevin

tseonez

@kthorngren thanks for the example! how do extend into this so that i can also generate url [with a share button] the selected filters?

kthorngren

This example from this thread shows how you can get the SearchPane filters that are applied. The loop can refactored to build the preSelect rows and column values.

Kevin

tseonez

@kthorngren Thank you so much, that example is helpful!

tseonez

I am planning to use this code to construct the url. what are the chances that the css classes will change in the future though?

$.each($('div.dtsp-searchPane'), function(i, col) {
         console.log("filter label" + i + ", placeholder: " + $(col).find('input.dtsp search.dtsp-disabledButton').attr('placeholder'));
        $.each($('tr.selected', col), function(j, row) {
          console.log('Column ' + i + ': ' + $('span:eq(0)', row).text());
     });
   });

allan

Possible, but it would be a major version change (e.g. 1.x -> 2.x) if so. DataTables 2 for example is going to update a lot of the class names to actually be sensible and consistent. div.dtsp-searchPane isn't changing though - it is basically in keeping with the correct structure (I'd have preferred it to be lower case, but it is what it is ).

I don't change the class names on a whim on each minor release!

Allan

tseonez

https://live.datatables.net/rosekuku/1/edit
still trying to get this working for my app. I had to encode the JSON string to include it as a parameter in a URL but my data table isn't loading with Search Pane filters that are applied when I use for example this test url:
https://live.datatables.net/rosekuku/1?searchPanes.preSelect=%5B%7B%22rows%22%3A%5B%22Edinburgh%22%2C%22London%22%5D%2C%22column%22%3A2%7D%5D&search.search=t

kthorngren

The problem is you have enabled stateSave which ignores the options set during Datatables initialization and restores the last saved table state. So the URL parameters are ignored. You can use stateLoadParams to remove the saved state options that correspond to the URL options you want to use. For example:
https://live.datatables.net/walarebe/1?searchPanes.preSelect=[{%22rows%22:[%22Edinburgh%22,%22London%22],%22column%22:2}]&search.search=t

Go to page 2 and reload the page. You will see the table is on page 2 but the URL parameters are used instead of the saved state. Depending on your needs you may need to adjust the stateLoadParams code to only delete the keys that are supplied in the URL.

Kevin

tseonez

@kthorngren thanks! that resolved some of my issues. now I am facing a strange issue that the search pane is empty if I reload the url with the search filter parameters twice. here is the setting I am using.
https://live.datatables.net/cihuluzo/1/edit

kthorngren

I'm not sure what you mean. I tried the page like this:
https://live.datatables.net/cihuluzo/1?searchPanes.preSelect=[{%22rows%22:[%22Edinburgh%22,%22London%22],%22column%22:2}]&search.search=t

I refreshed the page and it still worked. Please provide the exact steps needed to see the issue.

Kevin

tseonez

@kthorngren - couldnt reproduce it here using the editor vs on my app local so I am checking to see what else I have in my local app. I did notice another issue though. if I open the page here for ex. using this url:
https://live.datatables.net/poqomigi/1?searchPanes.preSelect=[{%22rows%22:[%22Edinburgh%22,%22London%22],%22column%22:2}]&search.search=t

and select "New York" under the office filter and run the url again. "New York" is still selected along with the Edinburgh, London. I want users to be able to share the link and not get a different results if they had previously selected another option before running the shared link.

kthorngren

Looks like there is another place where the selected options are stored:

Looks like the easiest solution is to remove the full searchPanes object, for example:

   stateLoadParams: function (settings, data) {
         console.log("triggerd");
           delete data.search.search;
     
           delete data.searchPanes //.selectionList;
         },

https://live.datatables.net/dufuregi/1?searchPanes.preSelect=[{%22rows%22:[%22Edinburgh%22,%22London%22],%22column%22:2}]&search.search=t

Kevin

tseonez

@kthorngren thank you! that will do!

tseonez

saveState is giving me an issue on pagenation reset. i tried adding this
data.start = 0; in the stateLoadParams function - still not not working. any suggestions? Thanks!

rf1234

You could try "delete data.start"

tseonez

@rf1234 that doesnt work. doing that even messes up with the showing message

kthorngren

Using data.start = 0; works in this updated example:
https://live.datatables.net/soburume/1/edit

Please provide a link to a non-working example so we can take a look.

Kevin

tseonez

@kthorngren the example u provided didn't show me the update.

here is the one I just tried.
https://live.datatables.net/mupibafo/1/edit

testing it with this url:
https://live.datatables.net/mupibafo/1?displayStart=30

kthorngren

the example u provided didn't show me the update.

Hmm, I guess it didn't auto-save.

Sorry, I misunderstood that you were trying to use this while adding displayStart to the deep linking support. As I mentioned above:

Depending on your needs you may need to adjust the stateLoadParams code to only delete the keys that are supplied in the URL.

You are right that deleting the data.start parameter causes none of the paging buttons to be highlighted. Setting it to 0 will always initially display the first page even though displayStart=30 is provided. It sounds like, in some cases, you will need to parse the URL parameters or use the searchOptions values to set the data.start to the parameter value supplied. You may need to do the same with order.

The deep link plugin wasn't designed for stateSave support. It was simply designed to support setting the initialization parameters. stateSave overrides the initialization parameters. So you will need to provide extra code to handle the deep linking parameters you want to support.

Kevin

tseonez

Thanks, that makes sense. I will try parsing the URL parameters.

kthorngren

I edited my comment and added that you might want to use the returned searchOptions. This will eliminate the need to parse the URL parameters.

Kevin

tseonez

Can you elaborate on that please. I just played around with adding 'data.start' or even 'start' to the searchOptions and it didn't work for me.

kthorngren

Something like this:

         stateLoadParams: function (settings, data) {
           if (searchOptions.hasOwnProperty('search.search')) {
             delete data.search.search;
             // Or maybe this
             // data.search.search = search.search
           }
     
           if (searchOptions.hasOwnProperty('displayStart')) {
             data.start = searchOptions.displayStart;
           }
           
           delete data.searchPanes; //.selectionList;
         },

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

Kevin

tseonez

Thank you so much! @kthorngren. my local app was throwing an error if I don't have the displayStart on the url parameter, so I modified so code slightly.

  if (searchOptions.hasOwnProperty('displayStart')   && typeof searchOptions.displayStart !== 'undefined') {
            data.start =searchOptions.displayStart;
  }

tseonez

Just revisiting this because I noticed, when I use the generated shared link to open the Datatable page, the settings I have for searchPane like viewTotal: false, hideCount: true, controls:false, orderable: false,layout: "columns-1"seems to be overridden.

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

url for testing.

https://live.datatables.net/madahuhi/1?searchPanes.preSelect=%5B%7B%22column%22%3A1%2C%22rows%22%3A%5B%22Data%20Coordinator%22%5D%7D%5D&search.search=%22

tseonez

@kthorngren or @allan do you have any suggestion please. I found a work around for most of the setting manipulating the DOM after initialization but for searchPane multi-selection option, it becomes single selection when I open the Datatable from the URL. how do i maintain the milti-selection option