响应式数据表不适用于 Bootstrap 4.3.1

Posted 2023-05-07

【中文标题】响应式数据表不适用于 Bootstrap 4.3.1

【英文标题】：Responsive dataTable is not working with Bootstrap 4.3.1

【发布时间】：2020-02-06 01:38:23

【问题描述】：

在这种特定情况下，响应式 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"
                ]
            );
        )

希望有人可以帮助我解决这个问题！ 谢谢指教

【参考方案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

【讨论】：

我添加了一个 setTimeOut 来解决这个问题，但您的回答是一个更好的解决方案，感谢您的帮助

【参考方案2】：

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