jQuery 数据表：未捕获的类型错误：无法读取未定义的属性“asSorting”

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

提问by Uder Moreira

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

我是 jQuery 新手，如果我的问题太简单，请见谅。

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.

所有这些都发生在jQuery ui Dialog Box 中。

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

它不起作用，我认为这是因为.dataTable() 插件找不到表所以我试图使用jQuery $.when。

The error is this

错误是这个

Uncaught TypeError: Cannot read property 'asSorting' of undefined

未捕获的类型错误：无法读取未定义的属性“asSorting”

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.

我需要的是：在插入的表中$("#send-one").html('done. ' + tableProgress)使用 .datatable 插件，但是直接使用 .datatable() 可能与插入不同步。

I also tried:

我也试过：

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

回答by David Hobs

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?

另一个堆栈溢出问题有一个更清晰的答案，它必须有一个<thead>和一个<tbody>才能工作： Jquery 数据表集成错误？

Your's is missing both.

你的两个都没有。

回答by Uder Moreira

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

我做了这个并且它有效。显然，数据表的 aoSorting 存在一些问题。我不知道为什么。

$("#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
        ]
});

回答by Ozgur Dogan

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

如果您使用的是 dataTable columnFilter 插件，这个插件解决了我的问题。

Just change _fnColumnIndex like this:

只需像这样更改 _fnColumnIndex ：

function _fnColumnIndex(iColumnIndex) {
        return iColumnIndex;
}

回答by Atrox111

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

您不调用任何异步函数（例如某些 AJAX 调用），因此该$.when函数在这里没有意义。

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();  

回答by Patrick Evans

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.

将表添加到#send-one, 文档准备就绪，然后在其上调用 dataTable。使用 id 没有意义，因为您可以将它放在 jQuery 对象中。

回答by mkutyba

Make sure you load the plugin .js file correctly.

确保正确加载插件 .js 文件。

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

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();