Datatables custom filtering with server side

Question

I'm using datatables (datatables.net) and also using server side processing (django).

I have a seperate textfield in which I use it to custom filter data in the DataTable after the table has been rendered already.

The following works just fine:

I want to custom filter columns

    var table = $('#problem_history').DataTable( {
        "bJQueryUI": true,
        "aaSorting": [[ 1, "desc" ]],
        "aoColumns": [
          // various columns here
        ],
        "processing": true,
        "serverSide": true,
        "ajax": {
          "url": "/getdata",
          "data": {
                 "friend_name": 'Robert'
          }
        }  
  } );

So on the page load (initial load of the datatable) it filters for 'Robert' just fine. But now I want to programmatically change the data to filter for "friend_name" == "Sara"

I alreeady tried the following, the filteredData has a correct filtered object but the table itself does not redraw with the new filter.

var filteredData = table.column( 4 ).data().filter(
        function ( value, index ) {
            return value == 'Sara' ? true : false;
        });
table.draw();

I also tried this but no luck.

filteredData.draw();

How Can I achieve this?

Thank you for your help.

Answer 1

Here is a very nice explanation on how to do it: https://datatables.net/reference/option/ajax.data

I am currently using this code:

"ajax": {"url":"/someURL/Backend",
        "data": function ( d ) {
                  return $.extend( {}, d, {
                    "parameterName": $('#fieldIDName').val(),
                    "parameterName2": $('#fieldIDName2').val()
                  } );
        }
}

You call it by doing the following:

$('#myselectid').change(function (e) {
        table.draw();
});

If you want to submit by clicking on the button, change the .change to .click and make sure that ID is pointing to button's id in a HTML

Answer 2

You've almost got it. You just need to assign the filter var to the data parameter that's passed in the datatables request:

"ajax": {
     "url": "/getdata",
     "data": {
     "friend_name": $('#myselectid').val();
    }
} 

And to filter the data, just call draw() on the select change event

$('#myselectid').change(function (e) {
        table.fnDraw();
});