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

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

tseoneztseonez Posts: 38Questions: 1Answers: 0
edited January 28 in Free community support

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

«13

Replies

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    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

  • rf1234rf1234 Posts: 2,947Questions: 87Answers: 416
    edited January 28

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0
    edited January 28

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    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?

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922
    edited January 29

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0
    edited January 29

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

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    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());
         });
       });
    
  • allanallan Posts: 63,210Questions: 1Answers: 10,415 Site admin

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    @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

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    @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.

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922
    edited February 8

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    @kthorngren thank you! that will do!

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    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!

  • rf1234rf1234 Posts: 2,947Questions: 87Answers: 416

    You could try "delete data.start"

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    @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

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922
    edited February 9

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    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;
      }
    
  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    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

  • tseoneztseonez Posts: 38Questions: 1Answers: 0

    @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

Sign In or Register to comment.