Cannot read property 'aDataSort' of undefined

michaelcp

Dear DataTables
I get the following error Cannot read property 'aDataSort' of undefined. Is there anything I am missing ?

Below is the code that I am using:

if (!$.fn.DataTable.isDataTable("#" + message + "grid")) {
$("#" + message + "grid").empty();

_globalGridObject = $("#" + message + "grid").DataTable({
    'paging': true,
    'lengthChange': true,
    'searching': true,
    'ordering': true,
    'colReorder': true,
    'info': true,
    "scrollX": false,
    "retrieve": true,
    language: {
        searchPlaceholder: "Search",
        search: '<i class="fa fa-search dataTableSearchTextboxClass"></i>',
        paginate: {
            next: '<i class="fa fa-chevron-right "></i>',
            previous: '<i class="fa fa-chevron-left "></i>'
        }
    },
    dom: 'lfrtip',
    buttons: [
        'excel', 'pdf'
    ],
    select: {
        style: 'single'
    },
    columnDefs: [
        {
            targets: [0],
            className: "hide_column"
        }
    ],
    lengthMenu: [[20, 50, 100, 200, 300, -1], [20, 50, 100, 200, 300, "All"]],
    columns: columns,
    data: griddata
})

}
else {
$("#" + message + "grid tbody").empty();
_globalGridObject = $("#" + message + "grid").DataTable();
_globalGridObject.clear().draw();
_globalGridObject.row.add(griddata[0]);
//_globalGridObject.columns.adjust().draw();
}

colin

You normally get that if the shape of the data doesn't match the HTML or the table declaration within DataTables.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

michaelcp

I have posted this
http://live.datatables.net/yoxipuwi/1/edit

if someone wants to take a look at it, but the thing is that the error doesnt popup here and i dont understand why, because i essentially copied and pasted my code here, but anyway, the grid is still empty and i dont know why is that either.

Any help would be appreciated. Again I repeat, we are trying to handle the fact when the user clicks multiple times very fast.

colin

I played with your test case, and have got it working here - the main problems were that you were missing the source files, hadn't defined griddata as an array and objectname was declared. It now fires up, shows the data, but I'm not seeing the error.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

michaelcp

Dear Colin

Thank you for your response, but the issue is not that. Anyway you have pointed me to the right direction and i found out something else in the code that happens after the grid is generated.

Thank you again.

michaelcp

Dear Colin

I think the problem is that the DataTable's columns are in an ajax post because they are being retrieved from the datatabase, for the reason that the user can select which columns are visible or not, i cant replicate this here because we are using ASP .NET CORE MVC, but it think the DataTable cannot be rendered yet during the ajax post and due to the fact that that method is asynchronous, the issue as i described occurs. Do you have any pointers or any tips on how can i handle that since the ajax/post request is mandatory ?

Thank you very much.

colin

This thread might help, it's showing how to create tables dynamically based on the Ajax response. You could possible do something like this.

Colin

michaelcp

Dear Colin

I dont think that thread could help because in our ajax post we need the datatable to already exist before we retrieve the columns.

Below is the ajax post that causes the issue (the line in bold is the one causes the problem)

function showCorrectColumns() {
    var objectname = gettabscurrent();
    $.ajax({
        //async: false,
        type: 'POST',
        url: WebUIApplicationName + '/Generic/TableStoredColumns',
        data: { "": _globalObjectName },
        dataType: "json",
        success: function (result) {
            for (var i = 0; i < result.length; i++) {
                while (result[i].Column.split(" ").length > 1)
                    result[i].Column = result[i].Column.replace(" ", "__");
            }

            globalColumnsResult = result;

            //todo --> the problem with the re-initialization is located below because the datatable is not created yet
**            var dttable = $('#tabs-' + gettabscurrent()).find('table').DataTable().rows().data();**

            for (var i = 0; i < result.length; i++) {
                $($('#tabs-' + gettabscurrent() + " .k-grid-header").find("colgroup").children()[i]).width(result[i].Size)
                $($('#tabs-' + gettabscurrent() + " .k-grid-content").find("colgroup").children()[i]).width(result[i].Size)
            }
            if (dttable.data().count() > 0) {
                
                for (var i = 0; i < result.length; i++) {
                    if (result[i].Hidden)
                        dttable.columns(i).visible(false);
                }
                IndividualColumnSearching();
            }
        }
    });
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Below is the ajax post that causes the issue

Is that still the error in the title of this thread? If so, as I mentioned before, you need to verify that the HTML and the table definition have the same number of columns - that's the normal cause of this problem.

If not, it would help if you could link to the page.

Colin

michaelcp

Dear Colin

When i clear a DataTable are the columns also cleared ?

Thank you

kthorngren

How are you clearing the Datatable?

Kevin

michaelcp

_globalGridObject.clear().rows.add(griddata).draw();

_globalGridObject is the DataTable instance.

kthorngren

The clear() API states this:

This method simply removes all rows from the DataTables, resulting in a data length set of 0. New data might then be added using the rows.add() method.

It does not remove the columns.

Kevin

michaelcp

Thanks for the clarification but unfortunately the issue still remains. In the end i may have to change the entire logic, i was just hoping to avoid it.

Thank you

kthorngren

I don't understand the problem you are trying to resolve.

I dont think that thread could help because in our ajax post we need the datatable to already exist before we retrieve the columns.

If you are fetching data for the table why does the Datatable need to be initialized before? Maybe provide a simple list of steps you need to take place so we can offer some suggestions.

Kevin

michaelcp

Just to inform about the solution of the problem. We eventually did everything regarding the grid synchronous instead of asynchronous and its working as intended. Thank you all for your help