Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

989
Views
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!

about 4 years ago · Santiago Trujillo
2 answers
Answer question

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.

about 4 years ago · Santiago Trujillo Report

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

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!