Bootstrap模式中的表格標題

我需要在模態引導中放置可滾動的數據表格。問題是標題已損壞。只有當我調整瀏覽器的大小，或者點擊標題重新排序時才解決。我嘗試在沒有模式的情況下使用相同的代碼，它的工作原理非常完美，顯然與模式和滾動不兼容。沒有滾動數據表適用。Bootstrap模式中的表格標題

我展示它的外觀，當我打開模式：

我用：

引導V3.0.0
數據表1.10.7
TableTools 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錯誤。

你必須點擊圖形條打開模態。要了解它如何管理標題或嘗試單擊標題來重新排序。

來源

2015-08-20 user3557705

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代碼和演示。

注意

有已修復的其他問題與您的代碼。

來源

2015-08-21 01:51:29

非常感謝您的回覆！我用我的代碼嘗試了幾個小時，但沒有成功。我更新了jsFiddle。你可以看到我做錯了嗎？謝謝http://jsfiddle.net/8ennjt3t/12/ – user3557705

我試着刪除標籤，並運作良好。我認爲這是問題（模式中的選項卡）。可能我必須使用「shown.bs.tab」，但我不知道如何 – user3557705

這可能會實現，以及：

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

工程與引導3.5，最新的JQuery，數據表1.10.9。

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

據我已經理解了力學，它調整寬度的元件已經變得可見後（模態，標籤等）。甚至可能與Popover一起工作，但我沒有測試過。儘管可能會導致tableheader在調整大小時閃爍一秒，但（僅限Modal，可能是因爲JQuery動畫？）。

上行是，那個人不需要再次初始化一個以前初始化表。可以使用標準API填寫表格，更新表格等。

來源

2015-10-04 22:38:02

Bootstrap模式中的表格標題

回答

相關問題