javascript - Datatables fixed columns scrollbar issue - Stack Overflow

I have a table on which I am using the DataTables FixedColumns plugin. I'd like for the scroll bar to resize to be only underneath the non-fixed columns, as it is in the example page here: .html

While using the exact same code, I am unable to make this work. Based on some remendations in the forums, I switched to the nightly builds of DataTables and FixedColumns, but that has not gotten me anywhere.

Illustration of the problem: /

Code:

$(document).ready( function () {
    var oTable = $('#example').dataTable( {
        "sScrollY": "300px",
        "sScrollX": "100%",
    "sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bPaginate": false
    } );

    new $.fn.dataTable.FixedColumns( oTable );
} );

Any ideas?

I have a table on which I am using the DataTables FixedColumns plugin. I'd like for the scroll bar to resize to be only underneath the non-fixed columns, as it is in the example page here: https://datatables/release-datatables/extras/FixedColumns/index.html

While using the exact same code, I am unable to make this work. Based on some remendations in the forums, I switched to the nightly builds of DataTables and FixedColumns, but that has not gotten me anywhere.

Illustration of the problem: http://jsfiddle/Ue6Gn/1/

Code:

$(document).ready( function () {
    var oTable = $('#example').dataTable( {
        "sScrollY": "300px",
        "sScrollX": "100%",
    "sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bPaginate": false
    } );

    new $.fn.dataTable.FixedColumns( oTable );
} );

Any ideas?

• javascript
• jquery
• datatable

Share Follow asked Apr 2, 2014 at 14:37 John ChrysostomJohn Chrysostom 3,98311 gold badge4242 silver badges5555 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Give a background colour to your header, in your case, give white. I faced the same issue. It worked for me.

You need to provide the appropriate DataTables CSS files in your html resources.

<link rel="stylesheet" type="text/css" href="//cdn.datatables/1.10.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables/fixedcolumns/3.0.2/css/dataTables.fixedColumns.css">

You can reference them here or find them in the latest version