Javascript Datatables标题在页面加载时不是全宽_Javascript_Datatables_Header_Modal Dialog

Javascript Datatables标题在页面加载时不是全宽

javascript datatables

Javascript Datatables标题在页面加载时不是全宽,javascript,datatables,header,modal-dialog,Javascript,Datatables,Header,Modal Dialog,当使用datatables加载我的web应用程序页面时，会加载datatable，但行不是表的全宽编辑数据或在datatable搜索中搜索后，标题跳至全宽。见图对此有什么解决方案或解决方法吗 datatable的屏幕截图：我的普通数据表很好，但这一个是在模式中加载的。代码模式：  <div id="SelectedShopsModal" class="infomodal"> <div

当使用datatables加载我的web应用程序页面时，会加载datatable，但行不是表的全宽

编辑数据或在datatable搜索中搜索后，标题跳至全宽。见图

对此有什么解决方案或解决方法吗

datatable的屏幕截图：

我的普通数据表很好，但这一个是在模式中加载的。代码模式：

<!-- Get selected shops modal -->
<div id="SelectedShopsModal" class="infomodal">
    <div class="shops-content">
        <h2><span class="closeModalSelectedShops">&times;</span> <?php echo lang('Shops'); ?></h2>
        <div class="detailblock">
            <table id="DataListTableSelectedShops" class="display" cellspacing="0" width="100%">
                <thead>
                    <th class="OE"><?php echo lang('Shop_No'); ?></th>
                    <th class="OE"><?php echo lang('Shop_Name'); ?></th>
                    <th class="OE"><?php echo lang('Shop_District'); ?></th>
                </thead>
                <tbody>
                    <?php foreach($selected_shops as $shop){
                        echo "<tr><td>" . $shop['Shop'] . "</td><td>" . $shop['Name'] . "</td><td>" . $shop['District'] . "</td></tr>";
                    } ?>
                </tbody>
            </table>
            <br /><button class="closeBtnSelectedShops btn red"><?php echo lang('Close'); ?></button>
            <button class="btn red" onclick="delete_oneshots();"><i class="fa fa-trash" aria-hidden="true"></i> <?php echo lang('Delete_shops'); ?></button>
        </div>
    </div>
</div>

我的页面页脚中使用的javascript：

//datatable to display all selected shops on detail page
selectedshoptable = $('#DataListTableSelectedShops').DataTable( {
    "dom": "Bfrtip",
    "scrollY": "300px",
    "scrollCollapse": true,
    "bPaginate": false,
    "bInfo" : false,
    "fields": [ {
        label: "Shopnr",
        name: "Shop"
    }, {
        label: "Shopname:",
        name: "Name"
    }, {
        label: "District",
        name: "District"
    }],
    "buttons":[{
        extend: 'selectAll',
        text: '<?php echo lang('Select_all'); ?>',
        className: 'btn red'
    }, {
        text: '<?php echo lang('Select_none'); ?>',
        className: 'btn red',
        action: function () {
            selectedshoptable.rows().deselect();
        }
    }],
    "language": {
        "zeroRecords": "<?php echo lang('Nothing_found'); ?>",
        "infoEmpty": "<?php echo lang('No_records_available'); ?>",
        "search":"<?php echo lang('Search'); ?>",
        "buttons": {"selectNone": "Select none"}
    }
});

原因您的表最初是隐藏的，这会阻止jQuery DataTables调整列宽

解决方案如果表位于可折叠元素中，则需要在可折叠元素可见时调整标题

例如，对于引导折叠插件：

$('#myCollapsible').on('shown.bs.collapse', function () {
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

如果表在选项卡中，则需要在选项卡可见时调整标题

例如，对于引导选项卡插件：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

上面的代码调整页面上所有表的列宽。有关更多信息，请参见API方法

响应、滚动或固定列扩展如果您使用的是Responsive、Scroller或FixedColumns扩展，则需要使用其他API方法来解决此问题

若您使用的是响应扩展，那个么除了调用API方法外，还需要调用API方法。参见示例

如果您使用的是Scroller扩展，则需要调用API方法而不是API方法。参见示例

如果您使用的是FixedColumns扩展，那么除了调用API方法外，还需要调用API方法。参见示例

链接有关jQuery DataTables中列最初隐藏时最常见问题的解决方案，请参阅。

CAUSE 您的表最初是隐藏的，这会阻止jQuery DataTables调整列宽