jQuery Datatables标题与垂直滚动不对齐

Question

我已经在datatables.net论坛上发布了这个,但一周之后,仍然没有回应.希望我能在这里找到帮助......

我正在使用数据表版本1.8.1,并且在启用垂直滚动的情况下对列标题对齐进行了噩梦.

使用下面发布的代码,标题在Firefox和IE8和IE9中正确排列,但Chrome和IE7关闭.我在这个项目中使用了很多数据表,这对每个人来说都是一个问题.我迫切需要帮助!

编辑:我已经发现这与设置表格的宽度有关.数据表占用其容器的宽度.如果我没有设置宽度,一切都很好(但桌子太大了,无法在页面上需要它).如果我将表格的div(或某个较高的父级div)给予宽度,则标题不会正确排列.

谢谢!!

截图:

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/chrome_alignment.png

www.dennissheppard.net/ie7_al​​ignment.png

otable = $('#order_review_grid').dataTable({                
    'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
        return formatRow(nRow, dataIndex);
    },
    'fnDrawCallback':function()
    {
        checkIfOrderSubmitted(this);                    
    },
    'aoColumnDefs':
    [
        { 'bVisible': false, 'aTargets': [COL_PRODUCT] },
        { 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
        { 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
        { 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
        { 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
    ],
    'sDom': 't',
    'sScrollY':'405px',
    'bScrollCollapse':true,
    'aaSorting':[]
});

<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">                 
    <thead class="grid_column_header_row" id="order_review_grid_column_header_row">
        <tr>
            <td class="" id='sequenceNumber'>SEQ #</td>
            <td class="grid_sc_header" id='statusCode'>Sc</td>
            <td class="grid_sc_header" id='onOrderGuide'>O.G.</td>
            <td class="grid_image_header" id='image'>Image</td>                         
            <td class="grid_description_header" id='description'>Description</td>                           
            <td class="grid_brand_header" id='label'>Brand</td>
            <td class="grid_pack_header" id='packSize'>Pack</td>
            <td class="grid_price_header" id='price'>Price</td>
            <td class="grid_qtrfull_header" id='caseQuantity'>Full</td>
            <td class="grid_qtrypart_header" id='eachQuantity'>Partial</td>
            <td class="grid_refnum_header" id='referenceNumber'>Ref #</td>
            <td class="grid_refnum_header">&nbsp;</td>
        </tr>
    </thead>
    <tbody class="">
        <!-- loaded data will go here -->
    </tbody>
</table>

Answer 1

我在这里遇到同样的问题.它在Mozilla Firefox,Opera中运行良好(像素完美的列对齐)但在Chrome 21中没有.

解:

就像在这篇文章中提到的那样http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

基本上正在发生的是,DataTables正在尝试读取浏览器绘制的表格的宽度,因此它可以使标题匹配.问题是,当DataTables在您的页面上进行此计算时,浏览器没有显示滚动条 - 因此计算有点错误!我之所以认为它是一个Webkit错误的原因是,即使在DataTables运行了所有逻辑之后,滚动条仍然没有显示出来.如果添加以下代码,您可以看到以下代码的效果:

console.log($(oTable.fnSettings().nTable).outerWidth()); setTimeout(function(){console.log($(oTable.fnSettings().nTable).outerWidth());},1);

有趣的是,在我添加了setTimeout之后,在执行之后仍然有一列没有对齐.添加"sScrollX"后:"100%","sScrollXInner":"100%"所有列都对齐(像素完美).

Chrome/Chromium解决方案,FF,Opera,IE9中的源代码:

$(document).ready(function()
{
  var oTable = $('#mytable').dataTable(
  {
    "sScrollY":  ( 0.6 * $(window).height() ),
    "bPaginate": false,
    "bJQueryUI": true,
    "bScrollCollapse": true,
    "bAutoWidth": true,
    "sScrollX": "100%",
    "sScrollXInner": "100%"
  });


  setTimeout(function ()
  {
    oTable.fnAdjustColumnSizing();
  }, 10 );

});

Answer 2

我通过使用overflow:auto包装带有div的"dataTable"表解决了这个问题

.dataTables_scroll
{
    overflow:auto;
}

并在dataTable初始化后添加此JS

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

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

Answer 3

我遇到了问题,结果证明是我的CSS副作用.尝试禁用所有外部CSS并查看问题是否仍然存在.

Answer 4

var table = $("#myTable").DataTable({
            "sScrollY": "150px",
            //"bAutoWidth": false // Disable the auto width calculation 
        });

    $(window).resize( function () {
        table.columns.adjust();
    } );

Answer 5

if ( $.browser.webkit ) {
    setTimeout( function () {
        oTable.fnAdjustColumnSizing();
    }, 10 );
}

对我来说完美！