DataTables not detecting thead?

pwnator

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 http://datatables.net/examples/basic_init/scroll_xy.html

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: https://i.imgur.com/kMCMjWK.png

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. http://i.imgur.com/2ZRAiMR.jpg

{% block script_block %}
    <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>
{% endblock %}
{% block body_block %}
    <div id="g_master"><table id="t_master" class="display table hover stripe" cellspacing="0" width="100%"></table></div>
{% endblock %}

• Joel

allan

Hi Joel,

Can you link to a test case showing the issue (per the forum rules) please.

Allan

pwnator

[Edit] 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(). Thanks for your time!