jQuery Datatable - changing data url

Question

Currently using the jQuery Datatables plugin.

I now need to be able to change the ajax data source based on some form input values, which would be submitted on a button click?

What is the recommended method for achieving this?

$(document).ready(function () {

        $('#btnReport')
            .click(function () {
                var table = $('#reports').DataTable();
                table.ajax.reload();
            });

        var querystring = '?from=' + $('#datetimepickerFrom').val() + '&till='  $('#datetimepickerFrom').val();

        var url = '/api/reports/custom';

        var table = $("#reports").DataTable({
            ajax: {
                url: url + queryString,
                dataSrc : ""
            },
            columns: [
                {
                    data: "fullName"
                },
                {
                    data: "timeIn"
                }
            ]
        });

    });

Many thanks

Gyrocode.com · Accepted Answer · 2016-07-18 14:45:47Z

3

Use ajax.url() and ajax.url().load() to set URL for the table and load data from that URL.

For example:

function getDataTableUrl(){
    return 
        '?from=' + $('#datetimepickerFrom').val() 
        + '&till=' +  $('#datetimepickerFrom').val();
}

$('#btnReport')
    .click(function () {
        var table = $('#reports').DataTable();
        table.ajax.url(getDataTableUrl()).load(); 
    });

edited Jul 18, 2016 at 14:45

answered Jul 18, 2016 at 12:14

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

3 Comments

adnan Over a year ago

Thanks, this seems to be what I needed

Gyrocode.com Over a year ago

@adnan, there was error in the code which is corrected.

Chris Hopkins Over a year ago

A slightly more flexible and efficient approach to the above (assuming you may well need thse values for the initial request as well) would be to put the getDataTableUrl() function call into the data table initialisation e.g. ajax : { url : getDataTableUrl() } and then call table.ajax.reload() wherever you need to reload

Collectives™ on Stack Overflow

jQuery Datatable - changing data url

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related