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

时间：2011-12-22 16:58:57

标签： javascript jquery html datatables

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

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

使用下面发布的代码，标题在Firefox和IE8以及IE9中正确排列，但Chrome和IE7已关闭。我在这个项目中使用 lot 数据表，这对每个人来说都是一个问题。我迫切需要帮助！

编辑：我发现这与设置表格的宽度有关。数据表占用其容器的宽度。如果我没有设置宽度，一切都很好（但桌子太大了，无法在页面上需要它）。如果我将表格的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>

21 个答案:

答案 0 :(得分：24)

我在这里遇到同样的问题。它在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 );

});

答案 1 :(得分：9)

我通过使用overflow：auto

包装“dataTable”表解决了这个问题 
.dataTables_scroll
{
    overflow:auto;
}

并在dataTable初始化

之后添加此JS 
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

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

答案 2 :(得分：8)

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

答案 3 :(得分：6)

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

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

答案 4 :(得分：5)

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

对我来说很完美！

答案 5 :(得分：3)

我有一个类似的问题，但我的搜索或排序或与表格交互后重新调整以适应重绘，尝试重绘...功能但最终没有运气即兴。我为我工作的有趣修复是以同样的顺序调用oTable.fnFilter( "x",0 )和oTable.fnFilter( "",0 )（搜索和清除搜索）...这有效...大声笑.. :)

答案 6 :(得分：2)

这可能对你有帮助（不确定，但我猜它值得一试）

将此代码添加到页面

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

取自这里 width columns problem in Chrome & Safari

另外，我认为值得尝试仅在构造函数中定义列而不是在（保留标记为空）中定义它们

答案 7 :(得分：1)

我也有这个问题。经过多次不同的尝试，我尝试了以下并成功。

我尝试在style属性中添加带有float属性的label标签。然后它找到了工作。

例如：

<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>

答案 8 :(得分：1)

我遇到了一个问题，即列中的数据太大而无法容纳，并且数据中没有地址用于换行符。我的解决方案是添加一个带溢出的div和一个title属性，如下所示：

<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>

这导致桌子几乎完全安定下来。

答案 9 :(得分：1)

如果您使用的是bootstrap：

.table {
    width: 100%;
    max-width: none; // >= this is very important
}

答案 10 :(得分：0)

经过长时间的挣扎，我设法调整了它：

  1. 在初始化数据表后添加。避免添加“scrollY/scrollX”， 并避免启用“scrollCollapse”
 $('#table_id').wrap('<div class="dataTables_scroll" />');
  1. 将这些添加到您的 CSS 样式中。
.dataTables_scroll
    {
        position: relative;
        overflow: auto;
        max-height: 200px;/*the maximum height you want to achieve*/
        width: 100%;
    }
  .dataTables_scroll thead{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 2;
  }

答案 11 :(得分：0)

我知道这是一个很旧的线程，但是在搜索标头对齐问题时我就落在了这里。原来我需要一个不同的解决方案，所以在这里发布以便有人发现它有用。

我刚刚在样式栏中添加了以下内容，它解决了该问题：

.table {table-layout:auto !important;}

Datatables似乎添加了固定的布局，因此添加此行使我的标题在滚动时与数据正确对齐

答案 12 :(得分：0)

不确定我是否有完全相同的问题。我正在处理一个非常大的表，40多列，并使用水平和垂直滚动。但是，如果浏览器窗口设置得如此之大以至于您可以看到整个表格，则列标题会保持对齐状态，而表格内容则位于中心位置。

我在firebug中注意到该表通过DataTables获得了1352px的宽度。将其设置为100％会使一切都排好！

答案 13 :(得分：0)

JS 

$('#<%=gridname.ClientID%>').dataTable( {                   

           "paging":         false
            });        

        });

然后在gridview上方添加一个div元素，如下所示。

  <div style ="height:600px; overflow:auto;"> 
  <asp:GridView ID="id" runat="server" DataKeyNames="key" ClientIDMode="Static" HeaderStyle-BackColor="#99ccff"
        BorderStyle="Inset" BorderWidth="1px" CellPadding="4" HorizontalAlign="Center" AutoGenerateColumns="false" Width="98%"  >
etc..
</div>

答案 14 :(得分：0)

我也遇到了同样的问题。我通过从datatable属性中删除'sScrollY':'405px'并使用fixed header来解决它。

答案 15 :(得分：0)

我发现宽度会在第一个窗口滚动中不对齐，所以解决方法是，在第一个滚动时只请求新的表格绘制。

const $table = $('#table').DataTable({ ... });

$(window).on('scroll', () => {
  $(window).off('scroll');
  $table.tables().draw();
});

修改：也适用于setTimeout功能。这取决于何时发生错位。

$table.tables().draw()是关键所在。

答案 16 :(得分：0)

我们可以使用sss和sDom中的微小更改来处理这个问题。

在css文件中添加以下类

.scrollDiv {
    max-width:860px; //set width as per your requirement
    overflow-x:scroll;  
}

替换你的＆＃39;在表的sDom属性中使用＆lt;＆＃34; scrollDiv＆＃34; t＆gt;并删除表

的scrollX属性

保存并享受！ :)

答案 17 :(得分：0)

我在bootstrap 3中遇到了这个问题，问题与我在应用bootstrap样式后添加的th和td元素上的左右填充有关。删除我的左右填充修复了我的问题。

答案 18 :(得分：0)

我使用bootstrap，我使用此

进行管理 
<table id="datatable_patients" class="table table-striped table-bordered table-hover table-responsive" width="100%">
     <thead></thead>
     <tbody></tbody>
</table>

答案 19 :(得分：0)

在firefox中遇到同样的问题， 我改变了一点这样的脚本jquery（在 jquery.dataTables.js 版本1.9.4中）：

line 3466 (v1.9.4) : nScrollHeadInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

line 3472 (v1.9.4) : nScrollFootInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

即使在排序和过滤后也能正常工作。

答案 20 :(得分：0)

这就是我摆脱这个问题的方法：

我通常在Ajax调用完成后使用它来执行函数

    WaAjaxHelper = {
    arr_execute_after_ajax: null,
    add_function_to_execute_after_ajax: function (fun) {

        if (typeof fun == 'function') {
            if (!this.arr_execute_after_ajax) {
                this.arr_execute_after_ajax = [];
            }
            this.arr_execute_after_ajax.push(fun)
            return true;
        } else {
            alert('ERROR: WaAjaxHelper.add_function_to_execute_after_ajax only functions possible');
            return false;
        }
    },
    execute_after_ajax: function () {
        if (this.arr_execute_after_ajax) {
            $.each(this.arr_execute_after_ajax, function (index, value) {
                try {
                    value();

                } catch (e) {
                    console.log(e);
                }
            })
        }
        this.arr_execute_after_ajax = null;
    }
}


$(document).ready(function () {
    $.ajaxSetup({
        async: true,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Accept", "text/javascript");
            $('.blockUI').css('cursor', 'progress');
        },
        complete: function (jqXHR, textStatus) {
            $('body').removeClass('waiting');
        },
        error: function (jqXHR, textStatus, errThrown) {
            alert("Ajax request failed with error: " + errThrown);
            ajax_stop();
        }
    });
    $(document).ajaxStart(ajax_start).ajaxStop(ajax_stop);
});


ajax_start = function () {
    // do something here
}
ajax_stop = function () {
   WaAjaxHelper.execute_after_ajax();
}

在视图中：

  var tbl;
  WaAjaxHelper.add_function_to_execute_after_ajax(function (){tbl.fnDraw()})

其中tbl存储数据表对象。

相关问题
最新问题