jQuery Datatables: Uncaught TypeError: Не удается прочитать свойство «asSorting» undefined

Question

Я новичок в jQuery, так что извините, если мой вопрос слишком прост.

Я пытаюсь сделать что-то вроде этого:

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

Все это происходит внутри jQuery ui Dialog Box.

Это не работает, я думаю, это потому, что .dataTable() pluggin не может найти таблицу, поэтому я пытаюсь использовать jQuery $.when.

Ошибка это

Uncaught TypeError: Cannot read property 'asSorting' of undefined

Что мне нужно: использовать .datatable pluggin в таблице, которая вставляется в $("#send-one").html('done. ' + tableProgress) но, используя .datatable() непосредственно не может быть синхронизирован с введением.

Я также попытался:

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

Answer 1

Этот другой переполнения стека вопрос был гораздо более четкого ответа, что он должен иметь <thead> и <tbody> работать: Jquery datatable integration error?

Ваш является отсутствие обоих.

Answer 2

Вы не называйте любой асинхронной функции (например, вызывает некоторые AJAX), так что функция $.when не имеет смысла здесь.

Поскольку вы используете функции, которые будут вызваны после завершения последнего, следующий код должен работать.

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

Answer 3

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

добавляет таблицу #send-one на документ готов, а затем вызывает DataTable на нем. Нет смысла использовать id, так как вы можете просто иметь его уже в объекте jQuery.

Answer 4

Убедитесь, что вы правильно загрузили файл .js-плагина.

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

Answer 5

Я сделал это, и это работает. по-видимому, какая-то проблема с aoSorting из datatables. Я не знаю почему.

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

Answer 6

Если вы используете dataTable columnFilter плагин, этот вопрос решил мою проблему.

Просто измените _fnColumnIndex так:

function _fnColumnIndex(iColumnIndex) { 
     return iColumnIndex; 
}