Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

996
Vistas
DataTable responsivo mostrar ciertas columnas

Estoy usando DataTables junto con problemas receptivos y enfrentados al intentar mostrar solo ciertas columnas.

El diseño de la mesa es así: ingrese la descripción de la imagen aquí

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!

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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.

Fuente


Aquí está su demostración de trabajo.

over 4 years ago · Santiago Trujillo Denunciar

0

Parece que necesitas esto :

La prioridad de la columna también se puede definir mediante un atributo de prioridad de datos en la celda del encabezado de la columna (por ejemplo, Nombre).

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda