how to pass parameters on reload of datatables

Question

I have a datatable that I initialize like this:

mytable = DataTable({
        ajax:{
            url: "/url/getTableData",
            dataSrc: ""

        },
        sortClasses: false,
        paging: false,
        scrollY: 300,
        columns: cols
    });

later I'd like to do

mytable.ajax.reload();

It works fine, but now I'd like to send a few parameters in that request. Those parameters I only need on reload, and not in the initialization of the table. How do I do that? thank you!

Did you read the documentation at all? It looks like you can use either of these right before you reload: datatables.net/reference/api/ajax.url() and datatables.net/reference/option/ajax.data — Ian
– Ian, Commented Jun 30, 2014 at 21:35
I did read the documentation, but I was not able to find the answer. I did not want to change the url, only the params. And I'm not sure if using the url like you suggested helps me in that sense, although it is, indeed, a solution. — BMF
– BMF, Commented Jul 2, 2014 at 20:34
Depending on what you meant by "a few parameters", changing the URL was an option (adding a querystring). But if you wanted to pass data in the body of a POST request, then use my second link (datatables.net/reference/option/ajax.data) - I'm pretty sure that's a much better example than the answer you accepted, and it seems to be for exactly what you're trying to do, not a hacky solution to it — Ian
– Ian, Commented Jul 2, 2014 at 21:29
it looks like the right answer. I'll try that. Thank you so much for explaining that. — BMF
– BMF, Commented Jul 3, 2014 at 15:28

ZenCodr · Accepted Answer · 2014-11-20 23:26:13Z

29

Option 1 - Use the preXhr.dt event.

table = $('#example')
    .on('preXhr.dt', function ( e, settings, data ) {
        data.whateveryouwant = $("#someidhere").val()
        data.anotherexample = "kittens"
    } )
// then just setup your datatable as normal
    .DataTable({
        ajax:{
            url: "/url/getTableData",
            type: "GET" // This is the default value, could also be POST
        },
        sortClasses: false,
        paging: false,
        scrollY: 300,
        columns: cols
});

see here http://datatables.net/reference/event/

Option 2 (preferred) - Use an ajax.data function.

table = $('#example').DataTable({
    ajax:{
        url: "/url/getTableData", // Change this URL to where your json data comes from
        type: "GET", // This is the default value, could also be POST, or anything you want.
        data: function(d) {
            d.whateveryouwant = $("#someidhere").val()
            d.anotherexample = "kittens"
        }

    },
    sortClasses: false,
    paging: false,
    scrollY: 300,
    columns: cols
});

Both options produce identical results. Your server will not know the difference. The extra data will be added on every table.ajax.reload(). The extra data will be:

whateveryouwant of with value of the #someidhere element, and

anotherexample with the value "kittens"

I prefer the Option 2, because it's more obvious that extra data is being added on each request. The first option is a little bit sneaky and not as obvious for someone else reading your code I think.

edited Nov 20, 2014 at 23:26

answered Jul 1, 2014 at 4:28

ZenCodr

1,1858 silver badges15 bronze badges

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

1 Comment

Radu Over a year ago

Thank you for outstanding answer (+1). Short question: Why is not working {data: "whatEverYouWant" : $("#someidhere").val() ) beacuse it' sn ot working but with function is working? I'm newbie in javascript

CurtinsCreations · Accepted Answer · 2021-10-29 03:38:19Z

0

My use case is different in that I don't want to permanently change the ajax action for the page. This works for me to change the ajax calls only when refresh is clicked, meaning serverside calls (ie for table sorting etc) can have a different behavior:

    // Create a refresh button
    $.fn.dataTable.ext.buttons.refresh = {
        text: 'Refresh',
        action: function ( e, dt, node, config ) {
          var origurl = dt.ajax.url();
          dt.ajax.url(origurl+"?forcereload=true").load();
          dt.ajax.url(origurl);
        }
    };

answered Oct 29, 2021 at 3:38

CurtinsCreations

111 bronze badge

Collectives™ on Stack Overflow

how to pass parameters on reload of datatables

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related