在 Bootstrap 模态中损坏 table header

Question

我需要将一个可滚动的数据表放在模态 bootstrap 中。问题是 header 坏了。仅当我调整浏览器大小或单击 header 重新排序时才解决。我尝试在没有模态的情况下放置相同的代码并且它工作完美，显然与模态和滚动不兼容。没有滚动数据表效果很好。

我展示打开模式时的样子：

我使用：

Bootstrap v3.0.0
DataTables 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 中看到错误。

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

Answer 1

SOLUTION

使用destroy选项销毁之前初始化的table。此外，您还需要使用 shown.bs.modal 事件来初始化 table 一旦它变得可见。

$(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", "0,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

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

Answer 2

这可能也有效：

$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();

适用于 Bootstrap 3.5，最新的 JQuery，Datatables 1.10.9.

$('#modal_name_xyz').on('shown.bs.modal', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
});

据我了解的机制，它会在元素变得可见（模态、选项卡等）后调整宽度。甚至可以使用 Popover，但我还没有测试过。可能会导致 table 标题在调整大小时闪烁一秒钟，但是（仅限模态，可能是因为 JQuery-Animations？）。

好处是，不需要再次初始化之前初始化的 table。 Table 可以使用标准 API.

进行填充、更新等操作

在 Bootstrap 模态中损坏 table header

Broken table header in a Bootstrap modal

css

jquery

datatables

twitter-bootstrap