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

charlietfl · Accepted Answer · 2015-07-21 12:53:21Z

25

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

edited Jul 21, 2015 at 12:53

answered Jul 21, 2015 at 12:47

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LefterisL Over a year ago

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

sunitkatkar Over a year ago

@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 Over a year ago

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

hadi.mansouri Over a year ago

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

Adam Boduch · Accepted Answer · 2015-07-21 12:35:05Z

1

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.

edited Jul 21, 2015 at 12:35

Adam Boduch

11.2k3 gold badges32 silver badges38 bronze badges

answered Jul 21, 2015 at 12:31

Jijo John

1,3759 silver badges21 bronze badges

1 Comment

charlietfl Over a year ago

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

gdm · Accepted Answer · 2021-04-19 10:33:00Z

-1

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

answered Apr 19, 2021 at 10:33

gdm

8,0464 gold badges46 silver badges74 bronze badges

Collectives™ on Stack Overflow

Datatables, change AJAX data ( not with elements )

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related