数据表Ajax搜索

DataTables Ajax Search

本文关键字：搜索 Ajax 数据表      更新时间：2023-09-26

我正在做一个项目，使用数据表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响应时如何执行操作，也不允许我控制选择框中的选项。

使用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的selectlist的selectitem值，并将其添加为自定义请求参数myparam1

您的服务器端代码需要从请求Request.QueryString['myparam1']获取这个值，并使用它来过滤源数据。要添加额外的自定义参数，只需在fnServerParams中添加另一个aoData.push行。

因为我使用的是v1.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>
相关文章：