vertical scrolly horizontal example ejemplos column bootstrap jquery datatables

jquery - scrolly - scroll datatable bootstrap



jQuery DataTables-Tabla responsiva con ScrollY no funciona (2)

Agregue className: ''none'' a su columndefs

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

Parece ser un conflicto entre el complemento receptivo y la opción de visibilidad oculta.

Estoy usando el plugin DataTables con la tabla responsiva y fijo yScroll y deshabilito xScroll.

Pero todavía obtengo la barra de desplazamiento horizontal, aunque estoy agregando el código como a continuación ...

scrollY: 200, scrollX: false,

Captura de pantalla Ref:

De todos modos, estoy usando la tabla de respuestas, ¿por qué quiero mostrar la barra de desplazamiento horizontal?

Debido a esto, la funcionalidad Expand / Collapse on Columns tampoco funciona ...

Consulte el código, el ejemplo en línea y la captura de pantalla a continuación ...

Demo en línea

CSS

th,td{white-space:nowrap;}

Si elimino el css anterior, está funcionando como se esperaba. Pero no quiero ajustar el texto td / th. Aquí es donde estoy enfrentando el problema :(

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> .....................


Cambiar esto de:

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

A:

columnDefs: [ { targets: 1 } ],

Y la barra de desplazamiento horizontal desaparece.

Horquilla de trabajo: http://cssdeck.com/labs/qfeibp13