datatable jquery - 表头宽度未与主体宽度对齐

Question

我正在使用jQuery数据表.运行应用程序时,标题宽度与主体宽度不对齐.但是当我点击标题时,它会与身体宽度对齐,但即便如此,也会出现一些轻微的错位.此问题仅在IE中出现.

的jsfiddle

这是页面加载时的样子:

点击标题后:

我的数据表代码:

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

rates是我的表id.
任何人都可以帮我这个吗？提前致谢.

Answer 1

原因

最有可能的是,您的表最初是隐藏的,这会阻止jQuery DataTables计算列宽.

解

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

• 如果您使用的是Scroller扩展,则需要调用scroller.measure()API方法而不是 columns().adjust() API方法.请参阅滚动扩展 - 错误的列宽或缺少数据示例.

• 如果您使用FixedColumns扩展,你需要调用fixedColumns().relayout()API方法除了以columns().adjust()API方法.请参见FixedColumns扩展名 - 不正确的列宽示例.

链接

请参阅jQuery DataTables - Bootstrap选项卡的列宽问题,以解决最初隐藏表时jQuery DataTables中列的最常见问题.

Answer 2

我用一个包裹"dataTable的"表解决了这个问题div有overflow:auto:

.dataTables_scroll
{
    overflow:auto;
}

并在dataTable初始化后添加此JS :

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

不要使用sScrollX或sScrollY删除它们并div自己添加一个包装器,它可以做同样的事情.

Answer 3

找到解决方案:

添加table-layout:fixed到表中.并在IE模式下打开应用程序.

Answer 4

当使用scrollX或scrollY参数在DataTables中启用滚动时，它会将整个表格拆分为两个或三个单独的HTML表格元素；页眉、正文以及页脚（可选）。这样做是为了提供以跨浏览器方式滚动数据表的不同部分的能力。

就我而言，我想要水平滚动条，因为内容向右滚动。因此，添加“scrollX”参数会在某些具有更多列的页面中产生此问题。

下面的代码将 div 包裹在 DataTable 周围，样式为“overflow as auto”。当dataTable执行完毕后，我们需要添加div。我们可以这样做：

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

如果您正在使用scrollX、scrollY、scrollXInner 或sScrollXInner 选项 - 删除它们。它们可能会引起问题。

资料来源： http: //sforsuresh.in/datatables-header-body-not-aligned

Answer 5

我修好了，为我工作。

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

要么

var table = $('#example').DataTable();
table.columns.adjust().draw();

参考：https : //datatables.net/reference/api/columns.adjust（）

Answer 6

使用这些命令

$('#rates').DataTable({
        "scrollX": true,
        "sScrollXInner": "100%",
    });

Answer 7

问题是在DOM上绘制数据表之前调用数据表，在调用数据表之前使用set time out。

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);

Answer 8

此代码将使标题与正文对齐。 data-table-basic是我给的数据表的id。

<style>    
    #data-table-basic_wrapper .dataTable, #data-table-basic_wrapper .dataTables_scrollHeadInner {
        width: 100% !important;
    }
</style>

Answer 9

正如 Gyrocode.com 所说：“很可能您的表格最初是隐藏的，这会阻止 jQuery DataTables 计算列宽。”

我也有这个问题，并在显示 div 后通过初始化 dataTable 解决了它

例如

$('#my_div').show();
$('#my_table').DataTable();

Answer 10

不需要弄出各种拐杖，table header的宽度没有和body对齐，因为table没有足够的时间为此填写数据，做setTimeout

   setTimeout(function() {
     //your datatable code 
  }, 1000);