Отзывчивый dataTable не работает с Bootstrap 4.3.1

Question

У меня проблема с отзывчивым плагином DataTable и Boostrap 4.3.1 в этом конкретном сценарии:

У меня есть очень большой модал, который отображает таблицу, в этой таблице 3 свернутых столбца с некоторой контактной информацией:работа как ожидалось:

Однако на мобильном дисплее таблица не сворачивает другие столбцы, как я ожидал, и таблица не переносится внутри модального:

Я использовал следующий пример на Datatables.net и загружал в основном те же файлы, за исключением Bootstrap, которыйверсия 4.3.1, а не 4.1.3.

Мой HTML:

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" id="modalOpciones" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Opciones:</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <table id="tablaDirectorio" cellspacing="0" class="table table-striped table-bordered dt-responsive " style="width:100%">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Departamento</th>
                            <th>Puesto</th>
                            <th>Fecha Creado</th>
                            <th>Extension</th>
                            <th class="none">Telefono</th>
                            <th class="none">Celular</th>
                            <th class="none">Email</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>id</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Departamento</th>
                            <th>Puesto</th>
                            <th>Fecha Creado</th>
                            <th>Extension</th>
                            <th>Telefono</th>
                            <th>Celular</th>
                            <th>Email</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

Мой Javascript:

$('#opciones-list').on('click', 'a' ,(e) => {
            $('#modalOpciones').modal('show');
            var tablaEditar=$('#tablaDirectorio').DataTable({
                "destroy": true,
                "responsive":/*{
                    "details": {
                        renderer: function ( api, rowIdx, columns ) {
                            var data = $.map( columns, function ( col, i ) {
                                return col.hidden ?
                                '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                                '</tr>' :
                                '';
                            } ).join('');

                            return data ?$('<table/>').append( data ) :false;
                        }
                    }
                }*/true,
                "autoWidth": false,
                "ajax": {
                    "url": 'controller/controller.php',
                    "method": 'POST',
                    data:{accion:'getTabla'}
                },
                "columns": [
                    {"data": "directorio"},
                    {"data": "nombres"},
                    {"data": "apellidos"},
                    {"data": "departamento_nombre"},
                    {"data": "puesto"},
                    {"data": "fechacreado"},
                    {"data": "Extension"},
                    {"data": "Telefono"},
                    {"data": "Celular"},
                    {"data": "Email"}
                ],
                "language":idioma_spanol,
                "columnDefs": [
                    {"className": "dt-center", "targets": "_all"}
                ]
            });
        })

Надеюсь, что кто-то может помочь мне в этом!! Спасибо за совет

Answer 1

ПРИЧИНА

Ваша таблица изначально скрыта, что не позволяет jQuery DataTables правильно инициализировать таблицу.

РЕШЕНИЕ

Используйте приведенный ниже код для пересчета ширины столбцов всех видимых таблицпосле того, как модальное становится видимым, используя комбинацию columns.adjust() и responsive.recalc() методов API.

$('#modal').on('shown.bs.modal', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .responsive.recalc();
});

Вы также можете настроить одну таблицу, используя идентификатор таблицы, например:

$('#modal').on('shown.bs.modal', function(e){
   $('#example').DataTable()
      .columns.adjust()
      .responsive.recalc();
});

LINKS

• jQuery DataTables: проблемы ширины столбца с вкладками Bootstrap - Отзывчивое расширение - Неверные точки останова .
• Datatable jquery - ширина заголовка таблицы не выровненас шириной корпуса

Answer 2

Попробуйте обернуть таблицу внутри div, а затем присвоить ей атрибут overflow:auto;