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: \"\"

              


        

Answer 1

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.