数据表 jquery - 表头宽度与主体宽度不对齐 [英] datatable jquery - table header width not aligned with body width

问题描述

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

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 中列的最常见问题.

I am using jQuery datatables. When running the application, the header width is not aligned with the body width. But when I click on the header, it is getting aligned with the body width but even then there is some light misalignment. This problem occurs only in IE.

JSFiddle

This is how it looks when the page gets loaded:

After clicking on the header:

My datatable code:

$("#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 is my table id.
Could anyone help me with this? Thanks in advance.

解决方案

CAUSE

Most likely your table is hidden initially which prevents jQuery DataTables from calculating 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.

这篇关于数据表 jquery - 表头宽度与主体宽度不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！