2

I have searched pretty extensively to try to find a way to be able to send a link with custom search parameters via Datatables but have not been able to find anything. I am using multifilter - https://datatables.net/examples/api/multi_filter.html.

What I want is that if a user searches for a specific First name, that that search will be appended to the URL so that the user could email a link to the specific result set he was looking for.

You can see in the image below an example.

Joel Gross
  • 71
  • 1
  • 6

2 Answers2

2

I've deleted my previous suggestion about using keepConditions as it didn't work in your use case (I tested) but it got me thinking and I've come up with this:

$('#example tfoot th').each(function(k, v){
    var title = $(this).text();
    $(this).html('<input type="text" data-position="'+k+'" placeholder="Search ' + title + '" />');
});    
var example = $("#example").DataTable();
example.columns().every(function(){
    var that = this;
    $('input', this.footer()).on('keyup change', function(){
        var hash = [];
        $('#example tfoot th').each(function(k, v){
            if(~~$(v).find("input").val().length){
                hash.push($(v).find("input").data("position") + "=" + encodeURIComponent($(v).find("input").val()));
            }
        });
        window.location.hash = hash.join("&");
        if(that.search() !== this.value){
            that.search(this.value).draw();
        }
    });
});
if(window.location.hash) {
    var hash = window.location.hash.substring(1).split("&");
    $.each(hash, function(k, v){
        $("#example tfoot th input:eq("+v.split("=")[0]+")").val(decodeURIComponent(v.split("=")[1])).trigger("change");
    });
}

Basically each time a search term is entered we iterate over all the inputs and update the url hash with the results, then we make sure we listen to see if there is a hash and do the reverse. This is a working example.

Hope that helps.

annoyingmouse
  • 5,524
  • 1
  • 27
  • 45
  • Hi @Mike, link now corrected, my bad for letting that fail :-( – annoyingmouse Dec 01 '16 at 10:03
  • How are you initializing that DataTable? I see that you are using the column filter in the footer, but I don't see where you have it initialized? – Mike Dec 01 '16 at 13:34
  • Hi again @Mike. It's initialised from a static table on the 5th line in the code above. Does that help? – annoyingmouse Dec 01 '16 at 16:26
  • I'm blind, yes that helps. I was looking at the example that you posted the link to. and didn't look at the answer that you posted here. You've been a lot of help Thanks! – Mike Dec 01 '16 at 17:45
0

So what you want is user could copy all search filters and email. How about this approach ? -

  1. Right a JS to construct URL. Call it on onblur of all search boxes.
  2. Constructed URL will be keep updating in a textbox (can be readonly or hidden)
  3. Give user a button "Copy Search Parameters" to copy contents of the URL textbox into clipboard
  4. User can paste and email copied URL.

This way we will not mess up with actual current URL.

Refer this for copying to clipboard.

Community
  • 1
  • 1
sid
  • 157
  • 1
  • 11