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

链接

Answer 2

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

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

2 个答案:

原因

解决方案

链接