通過下拉列表篩選數據表

Question

在我的Laravel應用程序中，我使用Datatables來實現簡單的篩選等。我設法開發了一個輸入字段，用於搜索生成的表。爲避免輸入錯誤，我想從下拉列表中使用選定選項的值。我一直在嘗試一些事情，但我無法做到。

查看：

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Custom Filter</h3> 
    </div> 
    <div class="panel-body"> 
     <form method="POST" id="search-form" class="form-inline" role="form"> 
      <div class="form-group"> 
       <label for="name">Name</label> 
       <input type="text" class="form-control" name="name" id="name" placeholder="search name"> 
      </div> 
      <div class="form-group"> 
       <label for="category">Category</label> 
       <select name="category" id="category" class="custom-select"> 
        <option value="reset">-Categorie-</option> 
       @foreach($adviceCategories as $category => $name) 
        <option value={{ $category }}>{{ $name }}</option> 
       @endforeach 
       </select> 
      </div> 
      <button type="submit" class="btn btn-primary">Search</button> 
     </form> 
    </div> 
</div> 

部分控制器：

if ($name = $request->get('name')) { 
    $advicePreparationsQuery->where('advice_protocols.name', 'like', "%$name%"); 
} 
if ($category = $request->get('category')) { 
    $advicePreparationsQuery->where('advice_protocols.category', 'like', "%$category%"); 
} 

$advicePreparations = $advicePreparationsQuery->get(); 

$datatables = Datatables::of($advicePreparations) 
    .... 


    return $datatables->make(true); 

而且我的腳本：

<script type="text/javascript"> 
    $(document).ready(function() { 
     oTable = $('#advicePreparations-table').DataTable({ 

      "processing": true, 
      "serverSide": true, 
      "ajax": { 
       url: "{{ route('advice_protocols.data') }}", 
       data: function (d){ 
        d.name = $('input[name=name]').val(); 
        d.category = $('option[name=category]').text(); 
       } 
      }, 
      "columns": [ 
       {data: 'name', name: 'name'}, 
       {data: 'category', name: 'category'}, 
       {data: 'question_name', name: 'goal'}, 
       {data: 'mergeColumn', name: 'mergeColumn'}, 
       {data: 'autheur', name: 'autheur'}, 
       {data: 'active', name: 'active'}, 
       {data: 'acties', name: 'acties', orderable: false, searchable: false}, 
       {data: 'delete', name:'delete', orderable: false, searchable: false} 
      ] 
     }); 
     $('#search-form').on('submit', function(e) { 
      oTable.draw(); 
      e.preventDefault(); 
     }); 
    }); 
</script> 

我試圖從下拉列表中輸入類型更改爲輸入字段檢查查詢是否錯誤，但這是有效的！我試圖將腳本行更改爲：d.category = $('select[name=category]').val(); ..但是在加載頁面時會執行查詢！這將禁用所有類別的概述..有人可以幫助我獲得選定的值的查詢？

Answer 1

你可以試試這段代碼是否有效？

$('select[name="category"]').on("change", function(event){ 
    var category = $('select[name="category"]').val(); 
    console.log(category); 
    oTable.fnFilter("^"+ $(this).val() +"$", 2, false, false) 

});