Datatables, change AJAX data ( not with elements )

Question

I have a Datatable which is getting populated by AJAX. All is good but i want to have some shortcuts to request data from the server. Problem is how can i change the data i'm sending on the fly ? I know i can create an element <input> or something and it can get the value from that, but i was hoping i could change the data once something is clicked.

var Table = $('#table').DataTable({
            "ajax": {
                "type" : "POST",
                "url": "url",
                "data": function ( d ) {
                    d.cmd = "offline";
                }
            },
        });

This works fine and passes the cmd as offline back to the server. How can i change that value on click before the ajax.reload is called.

$('#online_btn').on( 'click', function () {
            Table.ajax.reload();
        } );

Using this

$('#online_btn').on( 'click', function () {
            var d = [];
            d.cmd = "online";
            Table.ajax.data(d);
            Table.ajax.reload();
        } );

Gives back an ajax.data is not a function error

Solution 1

You could modify an object and use $.extend() to merge within the data function

var myData ={};
var Table = $('#table').DataTable({
            "ajax": {
                "type" : "POST",
                "url": "url",
                "data": function ( d ) {
                   return  $.extend(d, myData);
                }
            },
        });

$('#online_btn').on( 'click', function () {            
            myData.cmd = "online";            
            Table.ajax.reload();
});

Solution 2

Use jquery ajax beforesend object.

$.ajax({
 url: "http://fiddle.jshell.net/favicon.png",
 beforeSend: function( xhr ) {
   //update your value here
}
})

source: jquery documentation

beforeSend Type: Function( jqXHR jqXHR, PlainObject settings ) A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers, etc. The jqXHR and settings objects are passed as arguments. This is an Ajax Event. Returning false in the beforeSend function will cancel the request. As of jQuery 1.5, the beforeSend option will be called regardless of the type of request.

Comments

[charlietfl]

that's really what passing a function to the ajax.data property is doing only is being done internally within plugin

[LefterisL]

Was about to start implementing something like that. Exactly what i'm looking for

[sunitkatkar]

@charlieftl I required to do this kind of thing just now. Searched a lot but did not find a super simple example like yours which demonstrated how to use the data option of the ajax feature of datatables. Kudos for this simple yet very useful example!!

[phil1630]

I've been struggling with this for a few days. Your example worked like a charm! Thanks much.

[hadi.mansouri]

the best answer which saved me from a full day of unsuccessful searches!