jQuery DataTables 问题：列和行不在一行

Posted 2023-05-07

【中文标题】jQuery DataTables 问题：列和行不在一行

【英文标题】：jQuery DataTables issue: columns and rows not in one line

【发布时间】：2013-10-25 22:21:15

【问题描述】：

我在左侧有一个 x 轴和 y 轴滚动和固定列。我的问题是头到 tbody 的位置和行的位置。列和行没有完全显示在一行中，它们有点移位。

我试过这个：

Table header and body are not getting aligned properly when table header freezed using CSS

jQuery Datatables Header Misaligned With Vertical Scrolling

Fixed column header width does not match body column widths

但它对我不起作用。

这是我的javascript：

$(document).ready(function() 

var height = ($(window).innerHeight() - 180);

var oTable = $('#tableOverview').dataTable(
    "oLanguage": 
        "sProcessing":   "Bitte warten...",
        "sLengthMenu":   "_MENU_ Einträge anzeigen",
        "sZeroRecords":  "Keine Einträge vorhanden.",
        "sInfo":         "_START_ bis _END_ von _TOTAL_ Einträgen",
        "sInfoEmpty":    "0 bis 0 von 0 Einträgen",
        "sInfoFiltered": "(gefiltert von _MAX_  Einträgen)",
        "sInfoPostFix":  "",
        "sSearch":       "Suchen",
        "sUrl":          "",
        "oPaginate": 
            "sFirst":    "Erster",
            "sPrevious": "Zurück",
            "sNext":     "Nächster",
            "sLast":     "Letzter"
        
      ,
    "sScrollY": height,
    "sScrollX": "99%",
    "bPaginate": false   
    );
    new FixedColumns( oTable, 
      "iLeftColumns": 3
     );       
);

在此处查看完整示例：

http://jsfiddle.net/n74XN/2/

（在 jsfiddle 示例中，固定列有时工作，有时不工作，我认为这是因为结果窗口）。 表的数据由 php 动态加载（不在测试用例中）。这里可以看到真实应用的图片：

http://www.picamatic.com/view/9721451_DataTable/

我使用这个插件通过引导程序进行可视化：

https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3

和 FixedColumns 插件。

如何让它们正确显示？

【参考方案1】：

修正更改 .js 文件

oGrid.left.body.style.height = $(this.dom.scroller).height() **- 40** + "px";

http://datatables.net/forums/discussion/5839/scroll-with-fixedcolumn/p1?post#Form_Body