How to do custom filtering with Datatables and server-side processing

Question

I am using Datatables to display tabular data in my Web application, and have configured it to make use of server-side processing, i.e. query the server via AJAX for filtered da

Answer 1

Dynamic parameter, This one is working for me, seems best solution

t = $("#tbl_SearchCustomer").DataTable({
    processing: true,
    serverSide: true,
    info: true,
    ajax: {
        url: '../Data/SearchCustomer',
        data: function (data) {
            data.CustomerCategoryID = $("#CustomerCategoryID").val(); // dynamic parameter
            delete data.columns;
        }
    },
    deferRender: true,
    columns: [
        { "data": "FullName" },            
    ],       
    dom: 'lfrtip'
});

Answer 2

This answer is updated for version 1.10.6

This is now can be done using the ajax option.

Sample code

 $table.dataTable({
            "ajax":  {
                "url": "example.com/GetData",
                "type": "POST",
                "data": function(d) {
                    d.Foo = "bar";
                    d.Bar = "foo";
                    d.FooBar = "foobarz";
                }
            },
            "serverSide":true,
        });

Foo, Bar and FooBar will be posted as Form Data as additional parameters along with other existing ones like draw, start, length, etc so depending on your server side language you can read them accordingly.

In a real life scenerio, you would probably have a Search button and some input, you can trigger the filtering process by calling

        var table = $table.DataTable();
        table.ajax.reload(); 

when the button is clicked.

Answer 3

The solution is to employ DataTables' fnServerParams option, which allows you to add custom parameters to be sent in the XMLHttpRequest sent to the server. For example:

$(document).ready(function() {
  $('#example').dataTable({
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "/IndexXhr",
    "fnServerParams": function (aoData) {
        var includeUsuallyIgnored = $("#include-checkbox").is(":checked");
        aoData.push({name: "includeUsuallyIgnored", value: includeUsuallyIgnored});
    }
  });
});

Answer 4

Finally did it after spending hours!

I will post the complete method here for everyone's help.

One needs to use fnServerParams option, which allows adding custom parameters to be sent in the XMLHttpRequest sent to the server. For example:

Here is the coffescript I used:

jQuery ->
  table = $('#logs').dataTable
    bProcessing: true
    bServerSide: true
    sAjaxSource: $('#logs').data('source')
    fnServerParams: (aoData) ->
      applicationName = $("#applicationName").val()
      aoData.push
        name: "applicationName"
        value: applicationName

      return

  $("#applicationName").on "change", ->
    table.fnDraw()
    return

My HTML file contains the input element with id applicationName. Note the fnDraw() element I used to enable redraw request whenever input value changes.

Answer 5

This worked for me

$(document).ready(function() {
     table = $('#okmorders').DataTable( {
        // "ajax": 'http://cdpaha2.dev/admin/organizations/okm_orders'
				serverSide: true,
				"paging":   true,
				"searching":  false ,
        // "info":     false,
        "bLengthChange": false,
        // "iDisplayLength":50,
        // "aaSorting": [],
        // "oLanguage": { "sEmptyTable": "No orders present " } ,
        "aoColumnDefs" : [
          { 'bSortable' : false, 'aTargets' : [ 6 ]}
				],

			// 	"fnServerParams": function (aoData) {
			// 		 aoData.push({name: "includeUsuallyIgnored"});
			//  },
				ajax: {
		        url: 'yoururl.json' ,
		        type: 'POST',
						data:
						{
							'startDate':function(){return $("#startDate").val(); },
							'endDate': function(){return $("#endDate").val(); } ,
							'placedBy':function(){return $("#placedBy").val(); },
							'customer_po': function(){return $("#customer_po").val(); } ,
							'customer_ref': function(){return $("#customer_ref").val(); }
						}
    },
    } );