数据表标题在页面加载时不是全宽

Question

在加载带有数据表的Web应用程序页面时，会加载数据表，但<!-- 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> 行不是表的全宽。

编辑数据或在数据表搜索中搜索后，标题跳转到全宽。见图。

此解决方案或解决方法？

数据表的截图：

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

//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"}
    }
});

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

Users/GetUserSubscriptions(userId) : List<Subscriptions>
Users/GetUsers() : List<Users>

Answer 1

原因

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

解

• 如果table位于可折叠元素中，则需要在可折叠元素可见时调整标题。

  例如，对于Bootstrap Collapse插件：

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

• 如果表格位于标签中，则需要在标签变为可见时调整标题。

  例如，对于Bootstrap Tab插件：

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

上面的代码调整页面上所有表的列宽。有关详细信息，请参阅columns().adjust() API方法。

响应，滚动或固定的扩展

如果您使用的是Responsive，Scroller或FixedColumns扩展，则需要使用其他API方法来解决此问题。

• 如果您使用自适应扩展程序，则需要将responsive.recalc() API方法另外调用columns().adjust() API方法。请参阅Responsive extension – Incorrect breakpoints示例。

• 如果您使用的是Scroller扩展程序，则需要调用scroller.measure() API方法而不是 columns().adjust() API方法。请参阅Scroller extension – Incorrect column widths or missing data示例。

• 如果您使用的是FixedColumns扩展程序，则需要将fixedColumns().relayout() API方法另外调用columns().adjust() API方法。请参阅FixedColumns extension – Incorrect column widths示例。

LINKS

当最初隐藏表时，请参阅jQuery DataTables – Column width issues with Bootstrap tabs以获取jQuery DataTables中列最常见问题的解决方案。