数据表Ajax搜索

Question

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...

Answer 1

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.