How to use "data" obtained from Ajax call in aaData

loganfg

I'm trying to make a server-side ajax call to get data and place it in a data table but I'm having trouble utilizing the data collected in aaData. Here is the code I've written and it's saying that data isn't a declared variable. Is there a way of using the json data collected by the ajax to use it in aaData? Or is there a totally different and better way of doing this?

$('#SP_Table').DataTable({
        "serverSide": true,
        "ajax": {
            "url": SP_Table_Data_URL,
            "type": "GET",
           "cache": false,
            "async": false,
            "dataType": "json",
            "success": function (data) {
                if (SP_table_ptr !== null && typeof SP_table_ptr !== 'undefined') {
                    SP_table_ptr.destroy();
                    SP_table_ptr = null;
                    $('#SP_Table').replaceWith('<table id="SP_Table" cellpadding="0" cellspacing="0" border="0"></table>');
                };
            }
        },
        //"deferLoading": SP_totalRecords(),
        "aaData": data,
        "aaSorting": [0, 'asc'],
        "sPaginationType": "full_numbers",
        "iDisplayLength": SP_NumberOfRows($(window).height() - 330),
        "bDeferRender": true,
        "bLengthChange": false,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": false,
        "aoColumns":
            [
                { "sTitle": "Username", "mData": "Username", "sClass": "alignleft", "sWidth": "88%" },
                { "sTitle": "", "mData": "readbutton", "sClass": "aligncenter", "bSortable": false, "bSearchable": false, "mRender": function (data, type, full) { return data; }, "sWidth": "4%" },
                { "sTitle": "", "mData": "editbutton", "sClass": "aligncenter", "bSortable": false, "bSearchable": false, "mRender": function (data, type, full) { return data; }, "sWidth": "3%" },
                { "sTitle": "", "mData": "deletebutton", "sClass": "aligncenter", "bSortable": false, "bSearchable": false, "mRender": function (data, type, full) { return data; }, "sWidth": "5%" }
            ]
    });

Note: I am hoping to implement the deferLoading later to help with paging

allan

You can't use both aaData (data in the "new" style) and ajax at the same time. Each is a data source, so to be honest, it doesn't make sense to use both at the same time. Do you want to get it via Ajax, or do you already have it on the client-side and want to just populate it into the table?

The other thing with the code, you can't use success in the ajax option. As the documentation for ajax says:

success - Must not be overridden as it is used internally in DataTables.

This is a bit of a pain I realise - it is something that I will be addressing in a future release.

Don't use a callback to replace the HTML table. DataTables will update the existing table for you.

Allan

loganfg

I actually realized that there were a lot of changes with the "new" style and changed my code accordingly but now I have a different problem with displaying the data in the data tables using the 'columns' option. You can see my question here https://datatables.net/forums/discussion/36368/columns-missing-data#latest

allan

Okay - let's move the discussion over there and I'll close this thread.

Allan