Реагирующий бутстрап Datatable не сворачивающиеся столбцы в правильной точке

Ответ 1

Добавить Div с классом "table-отзыв" перед началом таблицы и удалить ширину = "100%" из тега таблицы,

<div class="panel panel-primary" style="margin: 50px;">
<div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
    <div style="width: 100%; padding-left: -10px; border: 1px solid red;">
    <div class="table-responsive">  // add this div
        <table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"> // remove width from this
            <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
            </thead>
        </table>
        </div>
    </div>
</div>

Ответ 2

Я знаю, что этот пост старый, для тех, кто пытается это сделать, просто сделайте это

<table id="example" class="display" cellspacing="0" width="100%"></table>

add width = "100%", он должен принять его и сделать его отзывчивым без какой-либо конфигурации таких

проверить Fiddle Working

Ответ 3

Для меня проблема была исправлена, когда я положил контейнер контейнера таблицы в строку бутстрапа div.

<div class="row">
 <div class="table-responsive">
   ... //table here
 </div>
</div>

Причиной этого было то, что версия бутстрапа datatables добавляла некоторую панель инструментов col * на панель инструментов (в моем случае), которые падали как прямые дочерние элементы под другим родительским col. В идеале должны быть дети строки, а не col (насколько я понимаю).

Ответ 4

Я знаю, что этот пост старый, но если у кого-то возникла эта проблема, попробуйте следующее:

После обновления содержимого DataTable используйте этот код (dt_table - мой экземпляр Responsive DataTable):

dt_table.draw();
dt_table.columns.adjust().responsive.recalc();

Дополнительная информация: https://datatables.net/reference/api/responsive.recalc()

Ответ 5

В моем случае я обнаружил, что скрытие таблицы или контейнера при загрузке страницы с помощью отображения CSS: ни один не избегал реагирующего поведения.

(неподтвержденное) решение состоит в том, чтобы скрыть таблицу или контейнер с помощью JavaScript вместо CSS.

Ответ 6

Мой случай похож на cem, но в моем случае я решил, добавив setTimeout, чтобы подождать некоторое время (около 200 миллисекунд), чтобы установить datatable

Ответ 7

Bro, добавьте это в заголовок для отзывчивого бутстрапа.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ответ 8

Что сработало для меня - это поместить таблицу в контейнер с пользовательским классом dtable-container

HTML

 <div class="dtable-container">
  <table id="datatable" class="table table-striped table-bordered">

  </table>
 </div>

CSS/МЕНЬШЕ

.dtable-container {
    max-width: 100% !important;


    table {
        white-space: nowrap !important;
        width:100%!important;
        border-collapse:collapse!important;
    }
}

Ответ 9

Вы должны включить отзывчивый CSS и JS

https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.css
https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js

 <table class="table table-striped table-bordered dataTable display" cellspacing="0" width="100%">
</table>

Это работает для меня. Всегда помните, что вы должны включать jquery и datatable css и js.

$('.dataTable').dataTable({
         "responsive": true,

    });