我已经在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_alignment.pngotable = $('#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"> </td>
</tr>
</thead>
<tbody class="">
<!-- loaded data will go here -->
</tbody>
</table>
我这里也有同样的问题。它在Mozilla Firefox, Opera中工作良好(像素完美的列对齐),但在Chrome 21中不行。
解决方案:
就像这篇文章中提到的http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
基本上发生了什么,是datatable试图读取表的宽度,浏览器已经绘制,所以它可以使标题匹配。问题是,当数据表这样做计算页面时,浏览器没有显示滚动条- and因此计算有一点错误!我建议的原因是这是Webkit的一个bug,即使在datattables运行了所有之后在它的逻辑中,滚动条仍然没有显示。如果你加上下面的代码可以看到这样做的效果:
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 );
});
我通过用溢出:auto的div包装"dataTable"表来解决这个问题
.dataTables_scroll
{
overflow:auto;
}
并在你的dataTable初始化之后添加这个JS
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
不要使用sScrollX或sScrollY,删除它们并添加一个div包装器自己做同样的事情。
我遇到了这个问题,原来是我的CSS的副作用。尝试禁用所有外部css,看看问题是否仍然存在。
var table = $("#myTable").DataTable({
"sScrollY": "150px",
//"bAutoWidth": false // Disable the auto width calculation
});
$(window).resize( function () {
table.columns.adjust();
} );
if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
非常适合我!
我有一个类似的问题,但我的调整大小以适应搜索或排序或与表交互后的方式导致重绘,尝试重绘…有功能但没有运气最后只能临时凑合。我为我工作的有趣的修复是按相同的顺序调用oTable.fnFilter( "x",0 )
和oTable.fnFilter( "",0 )
(搜索和清除搜索)…这是…lol . .:)
这可能会帮助你(不确定,但我想这值得一试)
将此代码添加到页面
if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
从这里取宽度列问题在Chrome &Safari
另外,我想它值得尝试在构造函数中定义列,而不是在(左标记为空)
我也有这个问题。经过多次尝试,我尝试了以下方法并成功了。
我尝试在style属性中添加带有float属性的标签标签。
例如:<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>
我遇到了一个问题,列中的数据太大而无法适应,并且数据中没有换行的地方。我的解决方案是添加一个带有溢出和标题属性的div,像这样:
<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>
这使得桌子几乎完全安定下来。
如果使用bootstrap:
.table {
width: 100%;
max-width: none; // >= this is very important
}
我是这样解决这个问题的:
我通常使用它在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存储数据表对象。
在firefox中出现同样的问题,我改变了一点脚本jquery像这样(在jquery. datatable .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";
即使在排序和过滤之后也能工作。
我使用bootstrap,我用这个管理
<table id="datatable_patients" class="table table-striped table-bordered table-hover table-responsive" width="100%">
<thead></thead>
<tbody></tbody>
</table>
我在bootstrap 3中遇到了这个问题,这个问题与我在应用bootstrap样式后添加的th和td元素的左和右填充有关。删除我的左和右填充固定在我的情况下的问题。
我们可以使用css和sDom中的小改动来处理这个问题。
在css文件中添加以下类
.scrollDiv {
max-width:860px; //set width as per your requirement
overflow-x:scroll;
}
将表sDom属性中的't'替换为<"scrollDiv"t>并删除表的scrollX属性
保存并享受!
我发现宽度会在第一个窗口滚动不对齐,所以解决方案是,在第一个滚动只请求一个新的表绘制。
const $table = $('#table').DataTable({ ... });
$(window).on('scroll', () => {
$(window).off('scroll');
$table.tables().draw();
});
Edit:也适用于setTimeout
函数。这取决于不对齐发生的时间。
$table.tables().draw()
是这里的关键。
我也面临同样的问题。我通过从datatable属性中删除'sScrollY':'405px'
并使用固定头来解决它。
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>
不确定我是否有完全相同的问题。我正在处理一个非常大的表,40+列,并使用水平和垂直滚动。但是,如果将浏览器窗口设置得大到可以看到整个表格,则列标题将左对齐,表格内容将位于中间。
我注意到在firebug中,表已经通过DataTables获得了1352px的宽度。将其设置为100%可以使所有内容对齐!
我知道这是相当老的线程,但我降落在这里搜索标题对齐问题。原来我需要一个不同的解决方案,所以在这里发布,以便有人会发现它有用。
我只是在我的样式块中添加了以下内容,它解决了这个问题:
.table {table-layout:auto !important;}
似乎数据表增加了固定的布局,所以添加这一行使我的标题与数据正确对齐时滚动
经过长时间的斗争,我设法调整它:
- 在初始化数据表后添加。避免添加" scrollly/scrollX"并避免启用"scrollCollapse"
$('#table_id').wrap('<div class="dataTables_scroll" />');
- 把这些添加到你的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; }