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

问题描述

使用数据表加载我的 Web 应用程序页面时，数据表已加载，但 行不是表格的全宽.

编辑数据后，或在数据表搜索中搜索，标题跳转到全角.看图.

对此有任何解决方案或解决方法吗?

数据表截图:

我的普通数据表很好，但这个是在模态中加载的.代码模态:

<!-- 获取选择的店铺模式 --><div id="SelectedShopsModal" class="infomodal"><div class="shops-content"><h2><span class="closeModalSelectedShops">&times;</span><?php echo lang('商店');?></h2><div class="detailblock"><table id="DataListTableSelectedShops" class="display" cellspacing="0" width="100%"><头><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><?php foreach($selected_shops as $shop){回声<tr><td>".$shop['商店'] .</td><td>".$shop['姓名'] .</td><td>".$shop['区'] ."</td></tr>";?></tbody><br/><button class="closeBtnSelectedShops btn red"><?php echo lang('Close');?></按钮><button class="btn red" onclick="delete_oneshots();"><i class="fa fa-trash" aria-hidden="true"></i><?php echo lang('Delete_shops');?></按钮>

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

//数据表显示详情页所有选中的店铺selectedshoptable = $('#DataListTableSelectedShops').DataTable( {"dom": "Bfrtip","scrollY": "300px",滚动折叠":真，bPaginate":假，bInfo":假，字段":[ {标签:Shopnr"，名称:商店"}, {label: "店名:",名称:名称"}, {标签: "区",名称:《区》}],纽扣":[{扩展:'全选'，文本:'<?php echo lang('Select_all');?>',className: 'btn 红色'}, {文本:'<?php echo lang('Select_none');?>',className: 'btn 红色',动作:函数(){selectedshoptable.rows().deselect();}}],语": {"zeroRecords": "

解决方案

CAUSE

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

解决方案

• 如果表格在可折叠元素中，则需要在可折叠元素可见时调整标题.

  例如，对于 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 方法.请参阅响应式扩展 - 不正确的断点 示例.

• 如果你使用Scroller扩展，你需要调用<代码>scroller.measure() API 方法代替 columns().adjust() API 方法.请参阅 滚动条扩展 – 不正确的列宽或缺失数据示例.

• 如果你使用 FixedColumns 扩展，你需要调用 fixedColumns().relayout() API 方法此外 columns().adjust() API 方法.参见 FixedColumns 扩展 – 不正确的列宽 示例.

链接

参见 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

• If table is in the collapsible element, you need to adjust headers when collapsible element becomes visible.

  For example, for Bootstrap Collapse plugin:

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

• If table is in the tab, you need to adjust headers when tab becomes visible.

  For example, for Bootstrap Tab plugin:

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

Code above adjusts column widths for all tables on the page. See columns().adjust() API methods for more information.

RESPONSIVE, SCROLLER OR FIXEDCOLUMNS EXTENSIONS

If you're using Responsive, Scroller or FixedColumns extensions, you need to use additional API methods to solve this problem.

• If you're using Responsive extension, you need to call responsive.recalc() API method in addition to columns().adjust() API method. See Responsive extension – Incorrect breakpoints example.

• If you're using Scroller extension, you need to call scroller.measure() API method instead of columns().adjust() API method. See Scroller extension – Incorrect column widths or missing data example.

• If you're using FixedColumns extension, you need to call fixedColumns().relayout() API method in addition to columns().adjust() API method. See FixedColumns extension – Incorrect column widths example.

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屋！