1
votes

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>
1
Can you show us the rendered html?Wesley Smith
Both of the rendered HTMLs are in the links. i.imgur.com/kMCMjWK.png and i.imgur.com/2ZRAiMR.jpgpwnator
No, thats an image of the console, I mean right click on the table in the inspector, click to view the html, copy it and paste it here. In my experience this issue is caused by having more columns in the tbody than in the thead or vice versaWesley Smith
I see these in your code </td>' + { % endfor % }'<td>' and 'H</td>' + { %for m in modules %}'<td id=" in your code. Did you mean for those to be between the td tags like that? And it seems you are missing some +s in there, but im not really sure whats going on thereWesley Smith
The resulting HTML is too long to fit in the comments nor in a pastebin. Is it okay if I just send it through email or something?pwnator

1 Answers

0
votes

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().