DataTables Ajax搜索

Question

我正在使用DataTables jQuery插件以及PHP和MySQL的項目。

我目前有一個表通過AJAX請求拉取數據並讀取JSON響應。

$('#example1').dataTable({ 
     "processing": false, 
     "serverSide": true, 
     "pageLength": 10, 
     "bFilter": false, 
     "aaSorting": [[1,'desc']], 
     "columnDefs": [ 
     { "width": "10%", "targets": 0 }, 
     { "width": "100%", "targets": 1 }, 
     { "width": "220%", "targets": 2 }, 
     { "width": "130%", "targets": 3 }, 
     { "width": "180%", "targets": 4 } 
     ], 
     "responsive": true, 
     "dom": '<"top"<"clear">>rt<"bottom"p<"clear">>', 
     "ajax": "ajax.parser.php?ajax_request=assignmentlist", 
     "fnDrawCallback" : function(oSettings) { 
     var total_count = oSettings.fnRecordsTotal(); 
     var columns_in_row = $(this).children('thead').children('tr').children('th').length; 
     var show_num = oSettings._iDisplayLength; 
     var tr_count = $(this).children('tbody').children('tr').length; 
     var missing = show_num - tr_count; 
     if (show_num < total_count && missing > 0){ 
      for(var i = 0; i < missing; i++){ 
      $(this).append('<tr class="space"><td colspan="' + columns_in_row + '">&nbsp;</td></tr>'); 
      } 
     } 
     if (show_num > total_count) { 
      for(var i = 0; i < (total_count - tr_count); i++) { 
      $(this).append('<tr class="space"><td colspan="' + columns_in_row + '">&nbsp;</td></tr>'); 
      } 
     } 
     } 
    }); 

我想的輸入框和選擇框的混合物放置在表的頂部通入AJAX請求，這樣我可以直接在數據庫中進行搜索。我不確定如何用我有限的插件知識來做到這一點。

我想達到的目標是這樣的：

https://datatables.net/examples/api/multi_filter_select.html

然而，這並不能說明如何在數據源是一個JSON響應要執行的操作，也沒有讓我控制選擇框中的選項。

在此先感謝...

Answer 1

因爲我用V 1.10，功能有所不同，但我被@markpsmith

"ajax": { 
     "url": "ajax.parser.php?ajax_request=assignmentlist", 
     "data": { 
      "status": $('#myselect').val() 
     } 
     } 

然後在我的形式在正確的道路導引......

<select id="myselect"> 
    <option val="1">1</option> 
    <option val="2">2</option> 
</select> 

Answer 2

您使用fnServerParams這一點。

您可以像通常一樣添加過濾控件，例如

<select id="myselect"> 
    <option val="1">1</option> 
    <option val="2">2</option> 
</select> 

包括這在你的數據表初始化代碼：

// Pass custom param to server 
"fnServerParams": function (aoData) { 
     aoData.push({ "name": "myparam1", "value": $('#myselect').val()}); 
} 

本例採用id爲myselect一個選擇列表的的選擇信息值，並將它作爲調用自定義請求參數myparam1

您的服務器端代碼需要從請求Request.QueryString['myparam1']中獲取該值並將其用於過濾源數據。要添加額外的自定義參數，只需將另一個aoData.push行添加到fnServerParams即可。