Geek Answers Handbook

JQuery DataTables - Answer table with ScrollY not working

I use the DataTables plugin with an adaptive table and fixed yScroll and disabled xScroll.

But I still get the horizontal scrollbar, although I am adding code as shown below.

scrollY: 200, scrollX: false,

Screenshot: enter image description here

Anyway, I'm using the Responsive table, why do I want to show the horizontal scrollbar?

Because of this, the functionality of Expand / Collapse on Columns also does not work ...

Please view the code, online example and screenshot below ...

Online demo

CSS

 th,td{white-space:nowrap;}

If I delete the above css, it works as expected. But I do not want to wrap td / th text. Here I ran into a problem :(

JQuery

 $(document).ready(function() { var table = $('#example').DataTable( { dom: 'RCT<"clear">lfrtip', scrollY: 200, scrollX: false, columnDefs: [ { visible: false, targets: 1 } ], "tableTools": { "sRowSelect": "multi", "aButtons": [ { "sExtends": "print", "sButtonText": "Print" } ] } }); });

HTML

 <table id="example" class="display responsive" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> .....................
+4
source share
2 answers

Change this:

 columnDefs: [ { visible: false, targets: 1 } ],

To:

 columnDefs: [ { targets: 1 } ],

And the horizontal scrollbar goes away.

Work fork: http://cssdeck.com/labs/qfeibp13

+1
source

Add className: 'none' to your columns.

 columnDefs: [ { className: 'none', targets: 1 } ]

This appears to be a conflict between the adaptive addon and the hidden visibility option.

+1
source

More articles:


All Articles