Link to prefiltered datatable?

Noodles12

Is it possible to link a user to a page containing a prefiltered DataTable. For instance, I might click a link about apples on site A, that would take me to SiteB containing a DataTable with apples, oranges, etc. Upon clicking the link, I would somehow pass in the word “apples” to the search box of the DataTable such that when I land on the page the table is already filtered on mortgage. Alternatively it might filter on one of the pulldown items in a certain column of the DataTable.

After research I used the following script on SiteB that has datatables, but it just initialises the datatbles page with prefilled search text apples. I am not sure what code goes on SiteA and what goes on SiteB to do what I need. I am new to development, so not sure how it works. Thanks.

<script>$(document).ready(function() {var table = $('#example_limited').DataTable( {responsive: true,paging: false,searching: true,lengthChange: false,bInfo: false,bSort: true,"search": {"search": "apples"}});});</script>

Noodles12

I am fine with passing static URL as well. I do not need to make it as a variable. I am just not sure how to create a static URL for prefiltered datatable search results.

colin

This blog post should help, it's demonstrating just that.

Colin

p.s. sorry about the need to post several times, the spam filter got a bit carried away!

Noodles12

Thanks Colin. Here is what I did. I am not a developer, so maybe I got everything wrong. This is what I did.

Page 1 where the link is (not the page with datatable):
I added following code:

$('#example_limited').DataTable( $.fn.dataTable.ext.deepLink( [ 'search.search', 'order', 'displayStart' ] "search": { "search": "Fred" } } );

Page 2 where the datatable is I added following: I did not set the search option here as I do not want this page to have search parameter on initialisation. I want the parameter only when someone clicks the link on page 1.

<script>$(document).ready(function() {var table = $('#example_limited').DataTable( {responsive: true,paging: false,searching: true,lengthChange: false,bInfo: false,bSort: true
});});</script>

I also included https://cdn.datatables.net/plug-ins/1.11.5/features/deepLink/dataTables.deepLink.min.js on both the pages.
I do not see page 1 passing parameter. I am sure more needs to be done. Do I need to do something on the page1 link itself?

Noodles12

After doing some research, I was finally able to implement it by adding this javascript and updating the URL to abc.com?search=fred

<script>
function getUrlVars() {
      var vars = [], hash;
      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
      for(var i = 0; i < hashes.length; i++)
      {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
      }
      return vars;
  } 
  $(document).ready(function() {
    var searchTerm = getUrlVars()['search'];
    var table = $('#example_limited').DataTable( {
      responsive: true,
      paging: false,
      searching: true,
      lengthChange: false,
      bInfo: false,
      bSort: true,
      search: {
        search: searchTerm
      }
   });
  });

    </script>

Noodles12

Using the same javascript, is it possible for me search only on a specific column.

Example:
abc.com?search=fred&Division=policy

Note:Division here denotes column name.

colin

That's not supported out of the box, you'll need to add that functionality into the deelLink code if you need it,

Colin