How to do custom filtering with Datatables and ser

问题:

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 data. I want to filter according to additional parameters that are specific to my application, i.e. corresponding to some user options (f.ex. via a checkbox in the UI). How do I make DataTables pass these additional filter parameters to the server?

回答1:

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.

回答2:

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});
    }
  });
});

回答3:

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.

回答4:

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(); }
						}
    },
    } );

回答5:

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