datatable ajax search,javascript - DataTables Ajax Search - Stack Overflow

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": '>rt>',

"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('

 ');

}

}

if (show_num > total_count) {

for(var i = 0; i < (total_count - tr_count); i++) {

$(this).append('

 ');

}

}

}

});

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:

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