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

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

• javascript
• jquery
• ajax
• datatables

3 Answers 3

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

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.

I do this in 2021:

function customSearch(){
        let t = JSON.parse(window.filter);
        t["custom-field"] =  $('input[name="custom-field"]').val() || "";
        window.filter = JSON.stringify(t);
        return window.filter;
}
const table = $('#table').DataTable({
        ajax:{
           url:"my-wonderful-url.json",
           type:"POST",
           data: function(d) {
            const t = customSearch();
            return  Object.assign(d, {filter:t});
        },
        error:function(e){console.log(e);},            
});
 $('input[name="custom-field"]').on('keyup', function(e){         
    table.ajax.reload(null, false);
});