DataTables не обнаруживает thead?

Question

Я ищу метод, который отображает очень большую таблицу с фиксированным заголовком и столбцом, поэтому я думал, что функция fixedColumns может работать. Оказывается, плагин не может даже разбить мою таблицу правильно. Я сравниваю результаты своей таблицы с демонстрацией scrollXY dataTables.

Если это уместно, сайт основан на Django, поэтому я использую встроенный фильтр для создания thead. После первоначального вызова AJAX результаты также передаются через фильтр до того, как каждая строка будет добавлена ​​к телу. Таблица не загружается из-за ошибки «aoColumns [srCol] is undefined», поэтому я переключил bSortable на false на оскорбительные столбцы. Когда scrollX и scrollY активированы, я получаю this.

Я проверил HTML и dataTables, которые не смогли разбить thead из tbody (оба находятся в scrollBody), и только стрелки сортировки остаются в scrollHead. Я включил почти все CSS и JS из демонстрации ScrollXY (и удалил все мои), поэтому я не уверен, что я пропустил. Я пробовал как jQuery 1.11.3, так и 2.1.4, и результаты те же.

Если я могу узнать, как создать демонстрационную страницу со значениями базы данных вне Django, я обновляю сообщение с кодом. Вот как выглядит моя таблица с CSS, td ссылками и без dataTables. The inspector shows that the table markup is correct.

На данный момент я могу опубликовать соответствующий код со страницы, но являются ли ошибки следствием добавления идентификаторов и ссылок в элементы td?

<link rel="stylesheet" type="text/css" href="{% static "css/gridism.css" %}"> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"> 
<style type="text/css"> 
    div.dataTables_wrapper { 
     width: 800px; 
     margin: 0 auto; 
    } 
</style> 
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $.ajax({ 
      url: 'modlist/1/', 
      success: function(data){ 
       $("#t_master").empty(); 
       $("#t_master").html("<thead><tr><th>Name</th><th>Institution</th><th>Designation</th><th>Expected date of graduation</th>{% for m in modules %}<th class='module'><a href='module/{{ m.ID }}'>{{ m.topic }}</a></th>{% endfor %}<th>Email</th><th>Contact number</th></tr></thead><tbody></tbody>"); 
       var table = document.getElementById("t_master").getElementsByTagName("tbody")[0]; 
       var index = 0; 
       var prevname; 
       data.forEach(function(obj) { 
        var date = 0; 
        var name = obj.sname + ', ' + obj.fname; 
        if (obj.graddate) date = obj.graddate.toString(); 
        var row = document.createElement('tr'); 
        if (index%2) row.className = 'alt'; 
        if (obj.graddate) { 
         row.innerHTML = '<td><a href="participant/'+ obj.ppant_id +'">' + name + '</a></td><td><a href="institution/' + obj.instn_id + '">' + obj.abbrev + '</a></td><td>' + obj.designation + '</td><td>' + date.substring(0,4) + ' ' + date.substring(4,5) + 'H</td>' + {% for m in modules %} '<td id="td_master_{{ m.ID }}_' + String(index) + '"></td>' + {% endfor %} '<td>' + obj.email + '</td><td>' + obj.contactn + '</td>'; 
        } 
        else { 
         row.innerHTML = '<td><a href="participant/'+ obj.ppant_id +'">' + name + '</a></td><td><a href="institution/' + obj.instn_id + '">' + obj.abbrev + '</a></td><td>' + obj.designation + '</td><td>N/A</td>' + {% for m in modules %} '<td id="td_master_{{ m.ID }}_' + String(index) + '"></td>' + {% endfor %} '<td>' + obj.email + '</td><td>' + obj.contactn + '</td>'; 
        } 
        if (prevname != name){ 
         table.appendChild(row); 
         modcell = document.getElementById('td_master_'+obj.mod_id+'_'+String(index)); 
         modcell.innerHTML = '<center><a href="training/' + obj.training_id + '">★</a></center>'; 
         index++; 
        } 
        else { 
         modcell = document.getElementById('td_master_'+obj.mod_id+'_'+String(index-1)); 
         modcell.innerHTML = '<center><a href="training/' + obj.training_id + '">★</a></center>'; 
        } 
        prevname = name; 
       }); 
      } 
     }); 
    }); 
    $(document).ready(function() { 
     $("#t_master").dataTable({ 
      scrollY: 500, 
      scrollX: true, 
      aoColumns: [ 
       null, 
       null, 
       null, 
       null, 
       {% for m in modules %}{bSortable:false},{% endfor %} 
       {bSortable:false}, 
       {bSortable:false} 
      ] 
     }); 
    }); 
</script> 

<div id="g_master"><table id="t_master" class="display table hover stripe" cellspacing="0" width="100%"></table></div> 

Answer 1

Ничего, я получил свою скрипку, чтобы работать. Это была неосторожная ошибка с вызовом функции dataTable(), который должен выполняться в $ (document) .ajaxSuccess(), а не в $ (document) .ready().