CODEWITHSUNDEEP
jquerydatatables
Uder Moreira
Uder Moreira

Reputation: 932

jQuery Datatables: Uncaught TypeError: Cannot read property 'asSorting' of undefined

I'm am new in jQuery, so sorry if my question is too simple.

I am trying to do something like this:

$("#send-one").html('done. ');

var tableProgress= $("<table id='table-progress'><tr><td></td></tr></table>");

$("#send-one").empty().append(tableProgress);

tableProgress.dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
});

All this occurs inside jQuery ui Dialog Box.

It does not work, I think it's because .dataTable() pluggin can't find the table so I am trying to use jQuery $.when.

The error is this

Uncaught TypeError: Cannot read property 'asSorting' of undefined

What I need is: use .datatable pluggin in a table that is inserted in $("#send-one").html('done. ' + tableProgress) but, using .datatable() directly may not be synchronous to the insertion.

I also tried:

$("#send-one").html('done. ' + tableProgress);
$('#table-progress').dataTable();

Upvotes: 10

Views: 57583

Answers (6)

Ozgur Dogan
Ozgur Dogan

Reputation: 51

If you are using dataTable columnFilter plugin, this one solved my problem.

Just change _fnColumnIndex like this:

function _fnColumnIndex(iColumnIndex) {
        return iColumnIndex;
}

Upvotes: 1

David Hobs
David Hobs

Reputation: 4511

This other stack overflow question had a much clearer answer, that it must have a <thead> and a <tbody> to work: Jquery datatable integration error?

Your's is missing both.

Upvotes: 38

Uder Moreira
Uder Moreira

Reputation: 932

I did this and it works. apparently some problem with aoSorting of datatables. I don't know why.

$("#send-one").html('done. ');

var tableProgress= $("<table id='table-progress'><tr><th></th></tr><tr><td></td></tr></table>");

$("#send-one").empty().append(tableProgress);

tableProgress.dataTable( {
    "aoColumns": [
          null
        ]
});

Upvotes: 8

mkutyba
mkutyba

Reputation: 1427

Make sure you load the plugin .js file correctly.

http://jsfiddle.net/CdRa5/6/

var tableProgress = $('<table id="table-progress"><thead><tr><th>heading</th><th>heading</th></tr></thead><tbody><tr><td>cell</td><td>cell</td></tr><tr><td>cell</td><td>cell</td></tr></tbody></table>');
$("#send-one").empty().append(tableProgress);
tableProgress.dataTable();

Upvotes: 0

Atrox111
Atrox111

Reputation: 527

You do not call any asynchronous function (such as some AJAX calls) so the $.when function doesn't make sense here.

As you use functions which will be called after the last one has completed the following code should work.

var tableProgress;
tableProgress = "<table id='table-progress'><tr><td></td></tr></table>";
$("#send-one").html('done. ' + tableProgress);
$('#table-progress').dataTable();

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

function someAction() {
            var tableProgress;
            tableProgress = $("<table id='table-progress'><tr><td></td></tr></table>");
            $("#send-one").append(tableProgress);
            tableProgress.dataTable();                                       
}

adds the table to #send-one, on document ready, and then calls the dataTable on it. No sense using the id since you can just have it already in an jQuery object.

Upvotes: 0

Related Questions