如何將搜索引數傳遞給資料表搜索欄位-有解無憂

我已成功設定資料表（默認情況下沒有搜索文本）。我希望能夠通過 URL 將搜索引數傳遞給我的 datatables 表。例如，如果我的默認資料表頁面是 abc.html。我想通過 url abc.html?search.search=test 添加搜索文本“test”

我不確定我該怎么做。請參閱下面資料表頁面上的代碼。

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

JS代碼：

$(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>

uj5u.com熱心網友回復：

您可以在加載頁面之前使用一些后端（例如 php、jsp、.NET 等）來處理查詢字串。

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

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

或使用一些 javascript 框架（例如 jQuery、ReactJS、Angular 等）來提取查詢字串并將其傳遞到您的 DataTable 搜索詞中。關于如何使用 jQuery 獲取查詢字串的示例

您可以用以下內容替換您的 javascript，然后嘗試 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
      }
   });
  });

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/461557.html

標籤：javascript css

上一篇：如果我用“arr[items]”替換“arr[index]”，我會得到一個值為[2、0、3、4]的陣列，有人可以解釋發生了什么

下一篇：用JavaScript交換影像