响应式数据表不适用于 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();
});

您也可以使用表格ID调整单个表格，例如：

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

链接

• jQuery DataTables: Column width issues with Bootstrap tabs - Responsive extension – Incorrect breakpoints。
• Datatable jquery - table header width not aligned with body width

Answer 2

尝试将表格包装在 div 中，然后为其赋予属性 overflow:auto;