Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to pass parameters on reload of datatables

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!

like image 820
BMF Avatar asked Jun 30 '14 21:06

BMF


People also ask

How much data can DataTables handle?

The maximum number of rows that a DataTable can store is 16,777,216.

What is Ajax in DataTables?

The ajax. dataSrc (i.e. data source) option is used to tell DataTables where the data array is in the JSON structure. ajax. dataSrc is typically given as a string indicating that location in Javascript object notation - i.e. simply set it to be the name of the property where the array is!


1 Answers

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.

like image 50
ZenCodr Avatar answered Oct 17 '22 21:10

ZenCodr