jquery - Bootstrap 模式中损坏的表头

Question

我需要在模态 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 中看到错误.

您必须单击图形栏才能打开模式。要查看它如何管理标题或尝试单击标题重新排序。

Answer 1

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

您的代码还有其他问题已得到修复。