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

2021/01/24 22:32 · jquery ·  · 0评论

我已经在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>

我遇到了问题,事实证明这是CSS的副作用。尝试禁用所有外部CSS,然后查看问题是否仍然存在。

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

});

我通过用带有溢出的div包装“ dataTable”表解决了这个问题:

.dataTables_scroll
{
    overflow:auto;
}

并在dataTable初始化后添加此JS

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

不要使用sScrollX或sScrollY,先删除然后再添加一个具有相同功能的div包装器。

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 )以相同的顺序(搜索和清除搜索)...这有效...大声笑.. :)

这可能对您有帮助(不确定,但我认为值得尝试)

将此代码添加到页面

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

从此处获取
Chrome和Safari中的宽度列问题

另外,我认为值得尝试仅在构造函数中定义列,而不是在(leave标签为空)中定义它们

我也有这个问题。经过多次尝试,我尝试了以下方法并成功。

我尝试在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>

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

如果您正在使用引导程序:

.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.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";

即使在排序和过滤后,它也可以工作。

我使用引导程序并对此进行了管理

<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;  
}

用<“ scrollDiv” t>替换表的sDom属性中的't'并删除表的scrollX属性

保存并享受!:)

我发现宽度在第一个窗口滚动中将不对齐,因此解决方案是,在第一个滚动中仅请求新的表格绘制。

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

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

编辑:也可以使用一个setTimeout功能。这取决于何时发生未对准。

$table.tables().draw() 是这里的关键。

我也面临同样的问题。我通过'sScrollY':'405px'从datatable属性中删除并使用固定标头解决了它

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多个列,并且正在使用水平和垂直滚动。但是,如果将浏览器窗口设置得太大,以至于您可以看到整个表,则列标题将保持对齐,并且表内容位于中间。

我在萤火虫中注意到该表通过DataTables的宽度为1352px。将其设置为100%可使所有内容对齐!

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

我在样式块中添加了以下代码,它解决了该问题:

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

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

本文地址:http://jquery.askforanswer.com/jquery-datatablesbiaotouyuchuizhigundongbuduiqi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!