数据表头不是页面加载时的全宽 [英] Datatables headers not full width on page load

问题描述

使用数据表加载我的web应用程序页面时，数据表已加载，但< the> 行不是表的全部宽度。

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

任何解决方案或解决方法？

数据表的屏幕截图：

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

 <！ - 获取选定的商店模式 - > 
< div id =SelectedShopsModalclass =infomodal> 
< div class =shops-content> 
< h2>< span class =closeModalSelectedShops>& times;< / span> <？php echo lang（'Shops'）; ？>< / H2> 
< div class =detailblock> 
< table id =DataListTableSelectedShopsclass =displaycellspacing =0width =100％> 
< thead> 
< th class =OE><？php echo lang（'Shop_No'）; ？>< /第> 
< th class =OE><？php echo lang（'Shop_Name'）; ？>< /第> 
< th class =OE><？php echo lang（'Shop_District'）; ？>< /第> 
< / 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 class =btn redonclick =delete_oneshots（）;>< i class =fa fa-trasharia-hidden =true>< / i> <？php echo lang（'Delete_shops'）; ？>< /按钮> 
< / div> 
< / div> 
< / div> 
  

我的页面页脚中使用了我的JavaScript：

  // datatable在详细信息页面上显示所有选定的商店
 selectedshoptable = $（'＃DataListTableSelectedShops'）。DataTable（{
dom ：bfrtip，
scrollY：300px，
scrollCollapse：true，
bPaginate：false，
bInfo：false，
字段：[{
标签：Shopnr，
名称：Shop
}，{
标签：Shopname：，
 name： 姓名
}，{
标签：District，
名称：District
}]，
按钮：[{
 extend：'selectAll'，
 text：'<？php echo lang（'Select_all'）;？>'，
 className：'btn red'
}，{
 text：'<？php echo lang（'Select_none'）;？>'，
 className：'btn red'，
 action：function（）{
 selectedshoptable.rows（ ）.D eselect（）; 
} 
}]，
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调整列宽。 
 
 
解决方案
 
 
 
您需要在显示表格时处理事件并调用  columns（）。adjust（）  API方法，这将在显示更改后重新计算列宽。
 
 $ b 
  $（ （'shown.bs.modal'，function（e）{
 $（$ .fn.dataTable.tables（true））.DataTable（）
 .columns.adjust（'#SelectedShopsModal'）。 （）; 
}）; 
  
请参阅  columns（）。adjust（） 更多API方法信息。
 
 
 
 LINKS 
 
 
 
请参阅 jQuery DataTables  -  Bootstrap选项卡的列宽问题，用于解决jQuery DataTables中当列表初始时最常见的问题隐藏。
 
When loading my web application page with datatables, the datatable is loaded but the <thead> row is not full width of the table.

After editing the data, or searching in the datatable search, the header jumps to full width. See picture.

Any solution or workaround for this?

Screenshot of datatable:



My normal datatables are fine, but this one is loaded within a modal. 
Code modal:
<!-- 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>
My javascript that is used in the footer of my page:
//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"}
    }
});

解决方案
CAUSE

Your table is hidden initially which prevents jQuery DataTables from adjusting column widths.

SOLUTION

You need to handle event when table is shown and call columns().adjust() API method. This will recalculate column widths after a change in the display.
$('#SelectedShopsModal').on('shown.bs.modal', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});
See columns().adjust() API methods for more information.

LINKS

See jQuery DataTables – Column width issues with Bootstrap tabs for solutions to the most common problems with columns in jQuery DataTables when table is initially hidden.

                        
这篇关于数据表头不是页面加载时的全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！