Datatables fixed columns scrollbar issue

Question

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.net/release-datatables/extras/FixedColumns/index.html

While using the exact same code, I am unable to make this work. Based on some recommendations 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.net/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?

Pavithra · Accepted Answer · 2015-05-14 10:33:06Z

4

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

answered May 14, 2015 at 10:33

Pavithra

562 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Chrysostom Over a year ago

Wow... over a year later, somebody rides in with a solution. Incidentally, it looks like you really need to give a background to the whole table, not just the header. Nevertheless, this is the solution.

Tom Hinz · Accepted Answer · 2014-07-15 21:19:58Z

-1

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

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

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

answered Jul 15, 2014 at 21:19

Tom Hinz

213 bronze badges

3 Comments

John Chrysostom Over a year ago

Added them to the JS Fiddle's external resources. Doesn't help. See here: jsfiddle.net/Ue6Gn/19

Tom Hinz Over a year ago

That would be my fault, I misread your question. The FixedColumns plugin creates clones of the datatable object and overlays those on top of the columns that you are locking. Have you tried writing your own customer scrollbar?

John Chrysostom Over a year ago

Not yet... my hope was that the plugin would do the same thing on my site as it did on the demo on the DataTables site... but apparently, that doesn't look like it's possible. On to other solutions, I guess. Thanks for your suggestions.

Collectives™ on Stack Overflow

Datatables fixed columns scrollbar issue

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related