数据表未检测到头
DataTables not detecting thead?
我正在寻找一种显示非常大的表的方法,该表同时具有固定的标题和列,因此我认为fixedColumns功能可以工作。事实证明,该插件甚至无法正确拆分我的表。我正在将我的表格的结果与数据表格滚动XY演示进行比较。
如果相关,该网站基于 Django,所以我使用内置过滤器来生成 thead。在初始 AJAX 调用之后,在将每一行追加到正文之前,结果也会通过筛选器传递。由于"aoColumns[srCol] 未定义"错误,该表无法加载,因此我在有问题的列上将 bSortable 切换为 false。激活 scrollX 和 scrollY 后,我得到了这个。
我检查了 HTML 和数据表未能将 thead 与 tbody 分开(两者都在 scrollBody 中),只有排序箭头留在 scrollHead 中。我包含了ScrollXY演示中几乎所有的CSS和JS(并删除了我的所有),所以我不确定我错过了什么。我尝试了jQuery 1.11.3和2.1.4,结果是一样的。
如果我能够找到如何在 Django 之外生成一个包含数据库值的演示页面,我将用代码更新帖子。这是我的表格在CSS,td链接和没有dataTables时的样子。检查器显示表标记正确。
现在我可以从页面发布相关代码,但这些错误是将 ID 和链接添加到 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>
没关系,我让我的小提琴工作了。dataTable() 函数调用是一个粗心的错误,应该在 $(document).ajaxSuccess() 而不是 $(document).ready() 上完成。
相关文章:
- 用程序搜索JQuery数据表中的文本
- 具有rowGrouping的数据表无法隐藏列
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 将单击事件添加到数据表
- 使用带有参数的数据表sAjaxSource
- 对角度数据表中括号内的数字进行排序
- 动态构建一个数据表与scriplets
- jquery数据表的自定义ko绑定
- 预览数据表单
- 如何在数据表中设置从Ajax响应选中的复选框
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- 数据表-隐藏/显示列
- 对损坏的子行进行排序的数据表
- 数据表排序但对行进行分组
- 检测数据的变化
- 如何使用javascript检测数据表分页的其他页面中的复选框
- 数据表未检测到头
- 如果在素数面数据表中添加新行,如何检测表单中的变化
- 检测是否处于打印模式或单击数据表导出工具中的打印按钮
- 检测html(表单)表中的行数据更改(JavaScript / Jquery)