数据表Ajax搜索

I'm working on a project that uses the DataTables jQuery plugin alongside PHP and MySQL.

I currently have a table that pulls data via an AJAX request and reads the JSON response.

$('#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>'); 
          }
        }
      }
    });

I would like to place a mixture of input boxes and select boxes at the top of the table to pass into the AJAX request so that I can perform a search directly in the database. I'm not sure on how to do this with my limited knowledge of the plugin.

What I want to achieve is something like this:

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

However, this doesn't show how to perform the action when the datasource is a JSON response, nor does it allow me to control the options in the select boxes.

Thanks in advance...

You use fnServerParams for this.

You can add filtering controls as you would normally e.g.

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

Include this in your datatables initialisation code:

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

This example takes the selectitem value of a selectlist with the id myselect, and adds it as a custom request parameter called myparam1

Your server side code needs to get this value from the request Request.QueryString['myparam1'] and use it for filtering the source data. To add extra custom parameters, just add another aoData.push line to fnServerParams.

Because I am using v 1.10, the function is somewhat different, but I was steered in the right path by @markpsmith

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

Then in my form...

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