DataTables not detecting thead?

Question

I'm looking for a method that displays a very large table that has both a fixed header and column so I thought the fixedColumns feature could work. Turns out that the plugin cannot even split my table correctly. I'm comparing the results of my table to the dataTables scrollXY demo.

If it's relevant, the website is based on Django so I use a built-in filter to produce the thead. After an initial AJAX call, the results are also passed through the filter before each row is appended to the tbody. The table fails to load due to a 'aoColumns[srCol] is undefined' error so I toggled bSortable to false on the offending columns. With scrollX and scrollY activated, I get this.

I checked the HTML and dataTables failed to split the thead from the tbody (both are in scrollBody), and only the sorting arrows are left in scrollHead. I included pretty much all of the CSS and JS from the ScrollXY demo (and removed all of mine) so I'm not sure what I missed. I tried both jQuery 1.11.3 and 2.1.4 and the results are the same.

If I'm able to find out how to produce a demo page with the database values outside of Django I'll update the post with the code. Here's what my table looks like with CSS, td links and without dataTables. The inspector shows that the table markup is correct.

For now I can post the relevant code from the page, but are the errors a consequence of adding IDs and links into the td elements?

<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

Never mind, I got my fiddle to work. It was a careless mistake with the dataTable() function call, which should be done on a $(document).ajaxSuccess() rather than $(document).ready().