Разбитый заголовок таблицы в модуле Bootstrap

Мне нужно поместить прокручиваемую информацию в модальном бутстрапе. Проблема в том, что заголовок сломан. Разрешается только при изменении размера браузера или при нажатии на заголовок для изменения порядка. Я пытаюсь поместить тот же код без модальности, и он отлично работает, по-видимому, несовместим с модальным и прокручивающим. Без прокрутки datatable работает хорошо.Разбитый заголовок таблицы в модуле Bootstrap

Я покажу, как это выглядит, когда я открываю модальное:

Я использую:

Bootstrap v3.0.0
DataTables 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

РЕШЕНИЕ

Используйте 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

Я попытался удалить вкладки и хорошо работать. Я думаю, что это проблема (вкладки в модальном). Вероятно, мне нужно использовать «show.bs.tab», но я не знаю, как – user3557705

Это может сработать, а также:

$.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(); 
});

Насколько я понял механику, он регулирует ширину после того, как элемент стал видимым (модальный, Tab и т.д.). Могу даже работать с Поповером, но я не проверял это. Может ли заставить Tableheader мерцать секунду при изменении размера (хотя и только модально, возможно, из-за JQuery-Animations?).

Сверху, что снова не нужно инициализировать ранее инициализированную таблицу. Таблица может быть заполнена, обновлена и так далее, используя стандартный API.

источник

2015-10-04 22:38:02

Разбитый заголовок таблицы в модуле Bootstrap

ответ

Смежные вопросы