jQuery DataTables issue: columns and rows not in one line

问题

I'm having a x- and y-axis scroll and fixed columns on the left side. My problem is the position of the thead to the tbody and the position of the rows. The columns and rows are not displayed exactly in one line, they are a little bit displaced.

I tried this:

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

but it didn't work for me.

This is my 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
    } );       
});

See full example here:

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

(fixed columns are working sometimes and sometimes not in the jsfiddle example, i think it's because of the result window). The data for the table is loaded dynamically by php (not in the test case). Here you can see a picture of the real application:

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

I use this plugin for visualisation with bootstrap:

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

and the FixedColumns Plugin.

How do i get them displayed right?

回答1:

Fixed changing .js file

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

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

来源：https://stackoverflow.com/questions/19426523/jquery-datatables-issue-columns-and-rows-not-in-one-line

标签

javascript

jquery

css

jquery-datatables