How to pass search parameter to datatables Search field

Question

I have successfully setup datatables (with no search text by default). I want to be able to pass a search parameter to my datatbles table via URL. for example if my default datatables page is abc.html. I want to add search text "test" via url abc.html?search.search=test

I am not sure how I can do this. Please see the code I have on the datatables page below.

http://live.datatables.net/nitozucu/1/edit

JS code:

$(document).ready(function() {
var table = $('#example').DataTable( {

  responsive: true,
  paging: false,
  searching: true,
  lengthChange: false,
  bInfo: false,
  bSort: true,
 
 });
});

HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />

  </head>
  <body>
    <table id="example" class="display" cellspacing="0" width="100%"><thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>

</thead><tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>

<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>

<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>

<tr>
<td><a href="https://www.yahoo.com/">AAAA</a></td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
</tr>

<tr>
<td><a href="https://www.yahoo.com/">Yahoo</a></td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
</tr>

<tr>
<td><a href="https://www.yahoo.com/">Google</a></td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
</tr>

<tr>
<td><a href="https://www.yahoo.com/">Test</a></td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
</tr>

<tr>
<td><a href="https://www.yahoo.com/">BBBB</a></td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
</tr>

<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
</tr>

<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
</tr>

<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
</tr>

</tbody></table>
</div>

</html>

I suggest adding the [tag:jquery] tag because your code specifically uses it. — unrealapex, Apr 22 '22 at 15:37

Kenneth Ong · Accepted Answer · 2022-04-22T15:36:19.240

You can either use some backend (e.g. php, jsp, .NET etc) to process the query string before loading the page.

$(document).ready(function() {
var table = $('#example').DataTable( {

  responsive: true,
  paging: false,
  searching: true,
  lengthChange: false,
  bInfo: false,
  bSort: true,
  search: {
    search: "<%= preprocessedQueryStringHere %>"
  }
 });
});

or use some javascript framework (e.g. jQuery, ReactJS, Angular etc) to extract the query string and pass it into your DataTable search term. example on how to get query string using jQuery

you can replace your javascript with the following, and try abc.html?search=san

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').DataTable( {
      responsive: true,
      paging: false,
      searching: true,
      lengthChange: false,
      bInfo: false,
      bSort: true,
      search: {
        search: searchTerm
      }
   });
  });

This worked!! Thankyou very much. You are awesome. Another question. How do I edit the javascript to filter on specific column? Example: abc.com?search=san&division=policy Note: Division here refers to the column name. — Superman, Apr 22 '22 at 16:07
You can try to incorporate getUrlVars()['division'] into [DataTable individual column search](https://datatables.net/examples/api/multi_filter.html) — Kenneth Ong, Apr 22 '22 at 16:20
I am not sure how to do it. I will open a seperate question. Thanks again. — Superman, Apr 22 '22 at 16:52

How to pass search parameter to datatables Search field

1 Answers1