How to pass search parameter to datatables Search field-CodePudding

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"  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>

CodePudding user response：

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
      }
   });
  });