Datatables - how to pass search parameter in a url

Question

I would like to be able to make a link to a page with a datatable which would pass a search parameter value in the url. The goal is to have the page with the datatable open pre-filtered with the search value parameter.

I've set up a jsfiddle to work in with some sample data.
http://jsfiddle.net/lbriquet/9CxYT/10/

The idea would be to add a parameter to the jsfiddle url so that the page would display with the search input value set to "firefox", for example, and the table filtered to show only the search matches.

Any help would be really appreciated!!

score 11 · Answer 1 · answered Feb 05 '16 at 09:39

This is an old question, but it still pops up high when searching for a solution. Here's what I did to make it work.

$(document).ready( function() {
  
  // First, get the search parameter. Here I use example.com#search=yourkeyword
    var searchHash = location.hash.substr(1),
        searchString = searchHash.substr(searchHash.indexOf('search='))
                    .split('&')[0]
                    .split('=')[1];
  
  
  $('#example').dataTable( {
    "oSearch": { "sSearch": searchString }
  } );
} )

Nicola Peluchetti · Answer 2 · 2012-06-27T16:36:40.253

5

You could simply have a function that reads your URL var and then filter the table. I imagine that you pass q=Firefox as your search

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
 var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;

}

$(document).ready(function() {
    // Get the query from the url
    var query = getUrlVars()['q'];
    // create the table
    var oTable = $('#example').dataTable();
    // Filter it
    oTable.fnFilter( query, 2 );
});

Fiddle here http://fiddle.jshell.net/9CxYT/17/show/?q=Firefox

edited Jun 27 '12 at 16:36

answered Jun 27 '12 at 13:16

Nicola Peluchetti

76,206
31
145
192

This sounds like the right solution... but I couldn't get it to work. Here is a jsfiddle of how I tried to integrate your code... perhaps I'm not going about it correctly? It hides all entries. http://jsfiddle.net/lbriquet/9CxYT/14/ – lbriquet Jun 27 '12 at 16:28
1

The jsfiddle design frame can be seen as a standalone page (not in an iframe). To do this right-click in the design frame and select "This frame" and then "open frame in new tab". This loads the page as: http://fiddle.jshell.net/lbriquet/9CxYT/14/show/ I tried adding the "q" value to the url, but it didn't add my value to the search filter or show the rows with the value. http://fiddle.jshell.net/lbriquet/9CxYT/14/show/?q=firefox Can you help me to understand what I'm doing wrong? – lbriquet Jun 27 '12 at 16:28
1

@lbriquet didn't know about that feature of jsfiddle. Anyway it was the getUrlVars function that sucked, now it works. I updated my answer – Nicola Peluchetti Jun 27 '12 at 16:37
1

Passing the value in the url works great!! Is there anyway that the value passed could be visible as the value in the search field? The idea would be that clicking on the reset button would reset the table to show all rows. Basically I would like the url to pass the value to the search field so that it filters the table based on the value. Then the reset button would remove the value from the search field and show the complete unfiltered table. – lbriquet Jun 27 '12 at 20:19

score 1 · Answer 3 · answered Jul 12 '19 at 13:37

Here is what I did to get it to work:

The first part from @Ibriquet gets the GET parameters from the url, I didn't change that. Quite possibly there is a nicer way to do this, but I didn't research that.

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
 var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;

}

For the second part I included this within the $('#tablename').DataTable( { here, right after the column setup }

      initComplete: function() {
        this.api().search(getUrlVars()['search']).draw();        
      },

This puts anything after the ?search= and before any & in your url into the search field.

It worked but I had to add this validation if (typeof getUrlVars()['search'] !== 'undefined') before the this.api().search(getUrlVars()['search']).draw(); Otherwise it was generating a warning in the console. — Luis Rodriguez, Oct 26 '21 at 22:03
I also had to add decodeURI to it: this.api().search(decodeURI(getUrlVars()['search'])).draw(); to decode the percent encoded strings in the URL. — Luis Rodriguez, Oct 26 '21 at 22:18

Datatables - how to pass search parameter in a url

3 Answers3

Linked