Estoy usando DataTables junto con problemas receptivos y enfrentados al intentar mostrar solo ciertas columnas.
Necesito mostrar solo 'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10'
y ocultar otros (estos deben mostrarse mediante el control de expansión al final de cada fila).
JS:
$( 'table' ).DataTable( { order: [ [ 0, "asc" ] ], responsive: { details: { type: 'column', target: 'tr' } }, columnDefs: [ { className: 'control', orderable: false, targets: -1 } ] } );
Este es el JSFiddle
. ¡Alguna sugerencia!
Para mostrar columnas específicas en la tabla de datos receptiva, solo necesita agregar Class Controls
en th
tabla, de la siguiente manera:
<table class="table table-hover table-striped"> <thead> <tr> <th class="all">Column 1</th> <th class="none">Column 2</th> <th class="all">Column 3</th> <th class="none">Column 4</th> <th class="none">Column 5</th> <th class="none">Column 6</th> <th class="all">Column 7</th> <th class="all">Column 8</th> <th class="none">Column 9</th> <th class="all">Column 10</th> <th class="none">Column 11</th> <th class="all"></th> </tr> </thead>
class "all": mostrar siempre la columna independientemente del tamaño de la pantalla.
clase "ninguno": no se muestra como una columna, pero se muestra en la fila secundaria.
Aquí está su demostración de trabajo.