数据表没有检测到头？

Question

我正在寻找一种方法来显示一个非常大的表，该表具有固定的标题和列，因此我认为 fixedColumns 功能可以工作。事实证明，该插件甚至无法正确拆分我的表格。我正在将我的表的结果与 dataTables scrollXY 演示进行比较。

如果相关，则该网站基于 Django，因此我使用内置过滤器来生成标题。在初始 AJAX 调用之后，在将每一行附加到 tbody 之前，结果也会通过过滤器。由于 'aoColumns[srCol] is undefined' 错误，该表无法加载，因此我在有问题的列上将 bSortable 切换为 false。激活 scrollX 和 scrollY 后，我得到 this。

我检查了HTML和dataTables未能将thead与tbody分开（两者都在scrollBody中），并且只有排序箭头留在scrollHead中。我包含了 ScrollXY 演示中几乎所有的 CSS 和 JS（并删除了我的所有），所以我不确定我错过了什么。 jQuery 1.11.3 和 2.1.4 都试过了，结果都一样。

如果我能够找到如何使用 Django 之外的数据库值生成演示页面，我将使用代码更新帖子。这是我的表格在使用 CSS、td 链接和没有 dataTables 时的样子。 The inspector shows that the table markup is correct.

现在我可以从页面发布相关代码，但错误是在 td 元素中添加 ID 和链接的结果吗？

<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() 上完成。