How to populate a JQuery datatable using AJAX option

Question

Please can somebody advise how I use the AJAX option on a JQuery datatable. I am currently using AJAX to retrieve data and then passing this as a data variable to be used when setting up the table:

$table = $('#cat_content_datatable').DataTable ( {
    select: {
        style: 'single'
    },
    data:data,
    "bFilter": false, // remove search filter
    "order": [],
    responsive: true,
    columns:    [
                    { 'data': null },
                    { 'data': 'content_id' },
                    { 'data': 'employer' }
                ],
    "columnDefs":   [ 
                        {
                            "targets": -3,
                            "orderable": false,
                            "data": null,
                            "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>"
                        },
                        {
                            "targets": [ 1 ],
                            "visible": false,
                            "searchable": false
                        }
                    ]
});

This works fine but I want to make use of the AJAX reload option on the datatable.

The data being passed to the table is:

[{"content_id":"47","employer":"ADAS"}]

I've tried the documentation AJAX option and am calling the following function:

function populateCatEmpDT (catDesc, catID, action) {

$table = $('#cat_content_datatable').DataTable ( {
    select: {
        style: 'single'
    },
    ajax: {
        url: '../workflow_ajax/fields/ajax.php',
        method: 'GET',
        data: {catDesc: catDesc, catID:catID, emp:'BT', action: action},
        dataType: 'json',
        type: 'POST'
    },
    "bFilter": false, // remove search filter
    "order": [],
    responsive: true,
    columns:    [
                    { 'data': null },
                    { 'data': 'content_id' },
                    { 'data': 'employer' }
                ],
    "columnDefs":   [ 
                        {
                            "targets": -3,
                            "orderable": false,
                            "data": null,
                            "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>"
                        },
                        {
                            "targets": [ 1 ],
                            "visible": false,
                            "searchable": false
                        }
                    ]
});

}

I can see from the console that I'm retrieving the same data:

[{"content_id":"47","employer":"ADAS"}]

but the datatable iteself just says "Loading..." and in the console I get an error:

TypeError: f is undefined

can anyone please help? Many thanks.

Bindrid, thank you for your help and apologies for the delay in responding. In the end I used the following code:

function populateTooltipDT(contentID) {

    $table = $('#tooltip_datatable').DataTable ( {
        select: {
            style: 'single'
        },
        destroy: true,
        ajax: {
            url: '../workflow_ajax/tooltips/ajax.php',
            type: 'POST',
            data: {contentID: contentID},
            dataType: 'json',
            dataFilter: function(data){
                // DataFilter is where you can change the json data format from what your server sends to 
                // what DataTable expects.
                // if your data is serialized at this point, deserialize it
                var jData = JSON.parse(data);

                // then what the DataTables expect and reserialize
                var dtData =JSON.stringify( {"data": jData});
                console.log(dtData);
                return dtData;
            }
        },
        "bFilter": false, // remove search filter
        "order": [],
        responsive: true,
        columns:    [
                        { 'data': null },
                        { 'data': 'id' },
                        { 'data': 'keyword' },
                        { 'data': 'tip' },
                        { 'data': null }
                    ],
        "columnDefs":   [ 
                            {
                                "targets": -5,
                                "orderable": false,
                                "data": null,
                                "defaultContent": "<button type = 'button' class='btn btn-xs btn-warning'>Edit</button>"
                            },
                            {
                                "targets": [4],
                                "orderable": false,
                                "data": null,
                                "defaultContent": "<button type = 'button' class='btn btn-xs btn-danger'>Delete</button>"
                            },
                            {
                                "targets": [ 1 ],
                                "visible": false,
                                "searchable": false
                            }
                        ]
    });

}

type and method are the same thing, one is an alias for the other so they should be the same. api.jquery.com/jQuery.ajax — Bindrid
– Bindrid, Commented Feb 14, 2017 at 0:36
Also, I have had to put my data inside an object called data for DataTable to automatically handle it unless you set the DataTable dataSrc property to point at something different — Bindrid
– Bindrid, Commented Feb 14, 2017 at 0:41
Thanks Bindrid. How do you place it inside an object called data? Apologies... this is a bit of a learning curve for me! — Lee A
– Lee A, Commented Feb 14, 2017 at 0:58

Bindrid · Accepted Answer · 2017-02-14 02:23:09Z

This is my interpretation of what your stuff should look like. It is a best guess so you may need to make adjustments.

$table = $('#cat_content_datatable').DataTable ( {
            select: {
                style: 'single'
            },
            ajax: {
                url: '../workflow_ajax/fields/ajax.php',
                type: 'POST',
                data: {catDesc: catDesc, catID:catID, emp:'BT', action: action},
                dataType: 'json',
                // this tells the client that the data coming back from the server is also JSON formatted data.
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data){
                    // DataFilter is where you can change the json data format from what your server sends to 
                    // what DataTable expects.
                    // if your data is serialized at this point, deserialize it
                    var jData = JSON.parse(data);

                    // then what the DataTables expect and reserialize
                    var dtData =JSON.stringify( {"data": jData});
                    return dtData

                }
            },
            "bFilter": false, // remove search filter
            "order": [],
            responsive: true,
            columns:    [
                            { 'data': null },
                            { 'data': 'content_id' },
                            { 'data': 'employer' }
            ],
            "columnDefs":   [ 
                                {
                                    "targets": -3,
                                    "orderable": false,
                                    "data": null,
                                    "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>"
                                },
                                {
                                    "targets": [ 1 ],
                                    "visible": false,
                                    "searchable": false
                                }
            ]
        });

if you do not what to use dataFilter, try adding dataSrc:"" to your definition

Collectives™ on Stack Overflow

How to populate a JQuery datatable using AJAX option

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related