$ ("# example"). DataTable() возвращает пустой массив

Question

После того, как вы несколько раз задумывались над этим в течение нескольких часов, и теперь, глядя всюду на помощь, я отправляю сообщение здесь. Моя проблема: плагин jQuery DataTable $(selector).DataTable() всегда возвращает пустой массив.

Чтобы создать это в минимальной форме и с использованием DataTables 1.10.7, примененной к

zero-config example

Я считаю, что var tableRef = $("#example").DataTable() возвращается [].

$("#example") 

решает, как можно было бы ожидать, чтобы

<table id="example" class="display dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">…</table> 

с

$("#example tr").length // 12 rows 

Этот старый стиле API работ:

$("#browserTable").dataTable(); 

[<table id=​"browserTable" cellpadding=​"0" cellspacing=​"0" margin-left=​"0" border=​"1" class=​"display dataTable" aria-describedby=​"browserTable_info" role=​"grid" style=​"width:​ 1339px;​">​…​</table>​] 

Но новый не делает.

Я в затруднении. Что я делаю не так? Может ли кто-нибудь помочь?

Answer 1

$(document).ready(function tableload() { 

    $('table.display').dataTable({ 
     "sScrollY": "300px", 
     "sPaginationType": "full_numbers", 
     "iDisplayLength": -1, 
    // "aLengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]], 
     "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], 
     "bScrollCollapse": true, 
     "bPaginate": true, 
     "bJQueryUI": true, 
     "aoColumnDefs": [ 
      { "aTargets": [ -1 ] } 
     ] 
    }); 


    /* Add a click handler to the rows - this could be used as a callback */ 
    $("#example tbody tr").click(function(e) { 
     if ($(this).hasClass('row_selected')) { 
      $(this).removeClass('row_selected'); 
     } 
     else { 
      oTable.$('tr.row_selected').removeClass('row_selected'); 
      $(this).addClass('row_selected'); 
     } 
    }); 

    /* Add a click handler for the delete row */ 
    $('#delete').click(function() { 
     var anSelected = fnGetSelected(oTable); 
     if (anSelected.length !== 0) { 
      oTable.fnDeleteRow(anSelected[0]); 
     } 
    }); 

    /* Init the table */ 
    oTable = $('#example').dataTable(); 
}); 

HTML

<table align="center" width="700" cellspacing="0" border="0" class="display" id="example"> 
          <thead> 


            <TR> 
             <TH>column A</TH> 
             <TH>column B</TH> 
             <TH>column C</TH> 
             <TH>column D</TH> 
             <TH>column E</TH> 
            </TR> 

           </thead> 
           <tfoot> 
            <TR> 
             <TD align="center" valign="bottom"> <B> TOTAL</B> </TD> 
             <TD></TD> 
             <TD></TD> 
             <TD></TD> 
             <TD></TD> 
            </TR> 
           </tfoot> 

          </table> 

Answer 2

Используйте мелкий случай d, чтобы создать новый DataTable экземпляр:

var tableRef = $("#example").dataTable({ 
    // options 
}); 

Широкоформатная случай D используется для доступа к API после DataTable экземпляра:

$("#example").DataTable(); 
equals 
$("#example").dataTable().api(); 
or 
tableRef.api(); 

More information

Answer 3

Большое спасибо всем, кто предложил помощь. При создании jsfiddle для демонстрации проблемы I не удалось, чтобы воссоздать его. Чувствуя себя застенчивым, я выглядел немного глубже, и теперь чувствую себя довольно уверенно, что проблема - потерянный (селектор). Значение DataTable() - это следствие получения этого значения в асинхронном обратном вызове, ситуация (с помощью средств защиты) описано here.

В моем случае асинхронный код является обработчиком websocket: я создаю DataTable в ответ на получение матрицы с моего сервера websocket. Хотя решение мне пока не ясно, я понимаю теперь, что мой вопрос, как изначально поставленный, не смог описать реальную ситуацию, и, таким образом, вводит в заблуждение.

Спасибо всем, кто предложил помощь!

• Пол