Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Datatables, change AJAX data ( not with elements )

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

like image 791
LefterisL Avatar asked Jul 21 '15 12:07

LefterisL


2 Answers

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();
});
like image 72
charlietfl Avatar answered Oct 22 '22 08:10

charlietfl


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.

like image 1
Jijo John Avatar answered Oct 22 '22 07:10

Jijo John