我需要在模态 Bootstrap 中放置一个可滚动的数据表。问题是 header 已损坏。仅当我调整浏览器大小或单击标题重新排序时才解决。我尝试在没有模态的情况下放置相同的代码并且它工作完美,显然与模态和滚动不兼容。没有滚动数据表效果很好。
我展示了打开模式时的样子:
我使用:
- Bootstrap v3.0.0
- 数据表 1.10.7
- 表格工具 2.2.4
我的代码:
$('#rutinasTable').DataTable({
"sScrollY": "210px",
"sScrollYInner": "100%",
"sScrollX": "100%",
"sScrollXInner": "100%",
"scrollCollapse": true,
"pageLength": 50,
});
HTML:
<table id="rutinasTable" class="display table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Rutina</th>
<th>Act. Datos</th>
<th>Antig. Datos</th>
<th>Criticidad</th>
<th>Observaciones</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td>SOS</td>
<td>08/07/2009</td>
<td>697 hrs</td>
<td>M-Media</td>
<td>NIVEL</td>
<td>Analizar</td>
</tr>
</tbody>
</table>
您可以在 this jsFiddle 中看到错误.
您必须单击图形栏才能打开模式。要查看它如何管理标题或尝试单击标题重新排序。
最佳答案
SOLUTION
使用destroy
销毁先前初始化表的选项。此外,您还需要使用 shown.bs.modal
事件在表格可见后对其进行初始化。
$(document).ready(function () {
chart = $.plot($("#placeholder"), data, options);
$('#modal').on('shown.bs.modal', function () {
$('#myInput').focus();
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburg", "5421","2011/04/25", "$320,800"]
];
$('#table').dataTable( {
"destroy": true,
//"ajax": "data/objects.txt",
"sScrollY": "210px",
"sScrollYInner": "100%",
"sScrollX": "100%",
"sScrollXInner": "100%",
"scrollCollapse": true,
"url": "/echo/json/",
"data":dataSet
});
});
});
DEMO
参见 this jsFiddle用于代码和演示。
NOTES
您的代码还有其他问题已得到修复。
关于jquery - Bootstrap 模式中损坏的表头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32125375/