necesito ayuda con un problema que estoy presentando en un proyecto al momento de introducir datatable con Ajax, resulta que cuando llamo a DataTable con JavaScript todo funciona bien, trabaja de manera responsive, pero automaticamente llamo a Ajax y pongo las columnas correspondientes, ya no es responsive la datatable. Ahora les presentaré las imagenes a ver si alguien me puede ayudar.
En la primera imagen se observa ya el Datatable funcionando al llamarlo con JS pero automaticamente introduzco "ajax" y todas sus propiedas, y luego las columnas, ya no me funciona igual el Datatable no es responsivo. Ahí está el código tambien.
$(document).ready(function(){
var opcion;
tablaUsuarios = $('#tablausuarios').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
},
"ajax":{
"url": "config/crud.php",
"method": "POST" //usamos el metodo POST
},
"columns":[
{"data": "id"},
{"data": "nombre"},
{"data": "usuario"},
{"data": "email"},
{"data": "nombre_grupo"},
{"data": "estado"},
{"data": "fecha_registro"},
{"defaultContent": "<a title='Editar Usuario' class='badge badge-info'><i style='color:white' class='fa fa-edit'></i></a><a title='Eliminar Usuario' class='badge badge-danger'><i style='color:white' class='fa fa-trash'></i></a>"}
]
});
});
Código HTML
<?php
$menu[02] = 1;
require "plantillas/header.php";
?>
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<!--h1 class="m-0 text-dark">Starter Page</h1-->
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><button id="nuevousuario" type="button" class="btn btn-secondary btn-sm form-control" data-toggle="modal"><i class="fa fa-plus"></i> Nuevo</button></li>
</ol>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card card-primary card-outline">
<div class="card-body">
<h1 class="card-title">Lista de Usuarios</h1>
<p class="card-text">
<table class="table table-striped table-bordered" id="tablausuarios">
<thead>
<tr>
<th>ID</th>
<th>Nombre Completo</th>
<th>Usuario</th>
<th>E-Mail</th>
<th>Grupo</th>
<th>Estado</th>
<th>Agregado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalusuarios" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dimiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<form id="formulario_usuarios">
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="nombres">Nombres</label>
<input class="form-control" type="text" id="nombres" name="nombres">
</div>
<div class="col-md-6">
<label for="apellidos">Apellidos</label>
<input class="form-control" type="text" id="apellidos" name="apellidos" >
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="correo">Correo</label>
<input class="form-control" type="email" id="correo" name="correo" >
</div>
<div class="col-md-4">
<label for="usuario">Usuario</label>
<input class="form-control" type="text" id="usuario" name="usuario" >
</div>
<div class="col-md-4">
<label for="password">Contraseña</label>
<input class="form-control" type="password" id="password" name="password">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="grupo">Grupo</label>
<select class="form-control" name="grupo" id="grupo" >
<option>Seleccionar...</option>
</select>
</div>
<div class="col-md-6">
<label for="cestado">Estado</label>
<select class="form-control" id="estado" name="estado">
<option>Seleccionar...</option>
<option>Activo</option>
<option>Inactivo</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" name="guardar" id="guardar" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<?php require "plantillas/footer.php"; ?>
width
en la etiquetatable
. Además, creo quedatatable
tiene la clasedt-responsive
. Debería quedarte algo así:<table class="table table-striped table-bordered dt-responsive" id="tablausuarios" width="100%">
. Prueba con una primero, luego con la otra y luego con ambas.