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即可。