数据表 Ajax 搜索

Question

我正在开发一个使用 DataTables jQuery 插件以及 PHP 和 MySQL 的项目。

我目前有一个 table 通过 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>'); 
          }
        }
      }
    });

我想在 table 的顶部混合输入框和 select 框以传递到 AJAX 请求中，以便我可以直接执行搜索在数据库中。我对插件的了解有限，不确定如何执行此操作。

我想达到的效果是这样的：

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

但是，这并没有显示当数据源是 JSON 响应时如何执行操作，也不允许我控制 select 框中的选项。

提前致谢...

Answer 1

为此您使用 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.

Answer 2

因为我使用的是 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>

数据表 Ajax 搜索

DataTables Ajax Search

javascript

ajax

jquery

datatables