• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

734
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!

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

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

almost 3 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 Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error