Hola, espero me puedan ayudar, tengo un datatable con muchos atributos y no logro que se haga responsive y que se oculten algunos atributos
Este es mi codigo en mi html
@extends('plantilla')
@section('titulo', 'Participantes')
@section('contenido')
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- Responsive-->
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="">
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
</head>
<div class="container">
<div class="card">
<div class="card-header ">Participantes registrados</div>
<div class="panel-body">
<div class="table-responsive">
<table id="participantes" class="able table-bordered data-table display nowrap"
cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>RFC</th>
<th>Nombre</th>
<th>Apellido Paterno</th>
<th>Apellido Materno</th>
<th>Fecha de nacimiento</th>
<th>Sexo</th>
<th>Grado Académico</th>
<th>Profesión</th>
<th>Cédula</th>
<th>Correo</th>
<th>Contraseña</th>
<th>Adscripción</th>
<th>Turno</th>
<th>Servicio</th>
<th>Nombramiento</th>
<th>Estado</th>
<th>Adscripción Externa</th>
<th>Created at</th>
<th>Updated at</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>
<!-- RESPONSIVE SCRIPS -->
<scrip src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></scrip>
<scrip src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></scrip>
<script>
$(function () {
var table = $('.data-table').DataTable({
"processing": true,
"serverSide": true,
"responsive": true,
"ajax": "{{ route('participante.index') }}",
"columns": [
{data: 'participanteId', name: 'participanteId'},
{data: 'rfc', name: 'rfc'},
{data: 'nombreParticipante', name: 'nombreParticipante'},
{data: 'apParticipante', name: 'apParticipante'},
{data: 'amParticipante', name: 'amParticipante'},
{data: 'fechaNacimiento', name: 'fechaNacimiento'},
{data: 'sexo', name: 'sexo'},
{data: 'gradoId', name: 'gradoId'},
{data: 'profesion', name: 'profesion'},
{data: 'cedula', name: 'cedula'},
{data: 'correo', name: 'correo'},
{data: 'contrasena', name: 'contrasena'},
{data: 'adscripcionId', name: 'adscripcionId'},
{data: 'turno', name: 'turno'},
{data: 'servicio', name: 'servicio'},
{data: 'nombramientoId', name: 'nombramientoId'},
{data: 'estatusId', name: 'estatusId'},
{data: 'nombreAdscripcion', name: 'nombreAdscripcion'},
{data: 'created_at', name: 'created_at'},
{data: 'updated_at', name: 'updated_at'},
],
});
});
</script>
@endsection
Quiero que se muestre algo así
He intentado añadiendo el siguiente scrip pero no pasa nada
