Te voy a mostrar un ejemplo completo que da la siguiente salida:
Código html:
<!-- Default box -->
<div class="box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
Listado de Usuarios de {{ estructura.title }} <a id="lnkActualizarDataTables" class="lnkCursorPuntero" data-src="{{ path('usuario_DTableListadoUsuariosNodo', {'estructuraId':estructura.idPublico|uuid_encode }) }}" data-toggle="tooltip" title data-original-title="Volver a cargar la lista de usuarios"><span class="glyphicon glyphicon-refresh"></span></a>
</h4>
</div>
<div class="box-body">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>Ver todos </label><input type="checkbox" id="chkVerTodos" />
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<table id="tablaDatos" class="table table-condensed table-hover" style="width: 100%;" data-src="{{ path('usuario_DTableListadoUsuariosNodo', {'estructuraId':estructura.idPublico|uuid_encode}) }}" data-src-nuevo="{{ path('usuario_registrar', {'nodoId':estructura.idPublico|uuid_encode}) }}">
<thead>
<tr class="bg-primary">
<th class="text-center" style="width: 4%;">No</th>
<th style="width: 30%;">Nombre y Apellidos</th>
<th style="width: 15%;">Identificador</th>
<th>Rol</th>
<th class="text-center" style="width: 5%;">Estatus</th>
<th class="text-center" style="width: 5%;">Editar</th>
<th class="text-center" style="width: 5%;">Eliminar</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Cóigo javascript:
$(document).ready(function () {
var _tablaDatosElement = $('#tablaDatos');
var _dtAPI = $(_tablaDatosElement)
.on('draw.dt', function () {
$('[data-toggle="tooltip"]').tooltip();
})
.on('preXhr.dt', function (e, settings, data) {
data.verTodos = $('#chkVerTodos').prop('checked') ? true : false;
data.columns = [];
})
.on('xhr.dt', function (e, settings, json, xhr) {
if (xhr.status === 401) {
window.location = _HOMEPAGE;
}
})
.DataTable({
"sDom": " <'row'<'#btnAdd.col-sm-2'><'col-sm-2'l><'col-sm-8'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-1'i><'col-sm-11'p>>",
"columns": [
{"data": "numero", "searchable": false, "orderable": false},
{"data": "nombre", "searchable": false, "orderable": false},
{"data": "identificador", "searchable": false, "orderable": false},
{"data": "rol", "searchable": false, "orderable": false},
{"data": "status", "searchable": false, "orderable": false},
{"data": "editar_link", "searchable": false, "orderable": false},
{"data": "eliminar_link", "searchable": false, "orderable": false},
],
"columnDefs": [
{"name": "numero", "targets": 0, "searchable": false, "orderable": false},
{"name": "nombre", "targets": 1, "orderable": false, "searchable": false, },
{"name": "identificador", "targets": 2, "searchable": false, "orderable": false},
{"name": "rol", "targets": 3, "searchable": false, "orderable": false},
{
"name": "status",
"targets": 4,
"render": function (data, type, full) {
if (data === 'enabled') {
return '<span class="label label-success">Habilitado</span>';
} else if (data === 'disabled') {
return '<span class="label label-warning">Deshabilitado</span>';
} else if (data === 'baja') {
return '<span class="label label-danger">Baja</span>';
} else {
return '<span class="label label-warning">Desconocido</span>';
}
}
},
{
"name": "editar_link",
"targets": 5,
"render": function (data, type, full) {
if (data.enabled === true) {
return '<a class="dtBtnEditar btn btn-xs btn-primary btn-flat" data-src="' + data.src + '" data-toggle="tooltip" title data-original-title="Editar usuario"><span class="glyphicon glyphicon-edit"></span> Editar</a>';
} else {
return '<a class="dtBtnEditar btn btn-xs btn-primary btn-flat disabled" data-src="' + data.src + '" data-toggle="tooltip" title data-original-title="Editar usuario"><span class="glyphicon glyphicon-edit"></span> Editar</a>';
}
}
},
{
"name": "eliminar_link",
"targets": 6,
"render": function (data, type, full) {
if (data.enabled === true) {
return '<a class="dtBtnEliminar btn btn btn-xs btn-danger btn-flat" data-src="' + data.src + '" data-toggle="tooltip" title data-original-title="Eliminar usuario"><span class="glyphicon glyphicon-remove"></span> Eliminar</a>';
} else {
return '<a class="dtBtnEliminar btn btn btn-xs btn-danger btn-flat disabled" data-src="' + data.src + '" data-toggle="tooltip" title data-original-title="Eliminar usuario"><span class="glyphicon glyphicon-remove"></span> Eliminar</a>';
}
}
}
],
"processing": true,
"serverSide": true,
"ajax": {
"url": $(_tablaDatosElement).data('src'),
"type": "POST"
},
"searchDelay": 1000,
"paging": true,
"info": true,
"searching": true,
"lengthChange": false,
"order": false,
"autoWidth": true,
"FixedHeader": true,
"responsive": true,
"language": {
"lengthMenu": "Mostrar _MENU_ registros por página",
"zeroRecords": "No se encontraron registros",
"info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
"infoEmpty": "No se encontraron registros",
"emptyTable": "No hay registros disponibles",
"infoFiltered": "(filtrados de _MAX_ registros totales)",
"loadingRecords": "Cargando...",
"processing": "Cargando...",
"search": "Buscar por Nombre o Identificador:",
"paginate": {
"first": "Primera",
"last": "Última",
"next": "Siguiente",
"previous": "Anterior"
}
},
"stateSave": true,
"stateDuration": 60 * 60 * 24,
"stateSaveCallback": function (settings, data) {
try {
data.verTodos = $('#chkVerTodos').prop('checked');
localStorage.setItem('DTusuarios', JSON.stringify(data));
} catch (e) {
console.log('on stateSaveCallback ' + e.message);
}
},
"stateLoadCallback": function (settings) {
try {
var estado = JSON.parse(localStorage.getItem('DTusuarios'));
if (estado !== null) {
$('#chkVerTodos').prop('checked', estado.verTodos);
}
return estado;
} catch (e) {
console.log('on stateLoadCallback ' + e.message);
}
}
});
$('#btnAdd').html('<a id="lnkRegistrarUsuario" class="btn btn-sm btn-primary btn-flat" data-src="' + _tablaDatosElement.data("src-nuevo") + '" data-cerrar-dialogo="1" original-title="Registrar usuario"> <span class="glyphicon glyphicon-plus"></span> Nuevo</a>');
$('#lnkActualizarDataTables').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
actualizarDataTable(_dtAPI, false);
});
$('#lnkRegistrarUsuario').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var elemento = $(this);
agregarRegistro(elemento, _dtAPI, true);
});
$(_tablaDatosElement).find('tbody').on('click', 'a.dtBtnEliminar', function (e) {
e.preventDefault();
e.stopPropagation();
var elemento = $(this);
eliminarRegistro(elemento, _dtAPI);
});
$(_tablaDatosElement).find('tbody').on('click', 'a.dtBtnEditar', function (e) {
e.preventDefault();
e.stopPropagation();
var elemento = $(this);
editarRegistro(elemento, _dtAPI);
});
$('#chkVerTodos').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
}).on('ifChanged', function (e) {
actualizarDataTable(_dtAPI, false);
});
});
Controlador (server side):
public function DTableUsuariosNodoAction(Request $request, UuidEncoder $uuidEncoder) {
if ($request->isXmlHttpRequest() && $request->isMethod(Request::METHOD_POST)) {
if (!$this->get('security.authorization_checker')->isGranted(array('ROLE_ESP_NAC', 'ROLE_ESP_PROV', 'ROLE_ESP_MUN', 'ROLE_ESP_AS'))) {
return new Response("Acceso denegado !!!", 403);
}
$nodoId = $uuidEncoder->decode($request->get('estructuraId'));
$draw = \intval($request->request->get('draw'));
$columns = $request->request->get('columns');
$start = \intval($request->request->get('start'));
$length = \intval($request->request->get('length', $this->container->getParameter('resultados_por_pagina')));
$filtro = $request->request->get('search');
$verTodos = $request->request->getBoolean('verTodos', false);
$em = $this->getDoctrine()->getManager();
$nodo = $em->getRepository(\AppBundle\Entity\EstructuraOrganizativa::class)->findOneJoinTipoEstructuraOrganizativa($nodoId);
if (is_null($nodo)) {
return new Response("No se encontró la estructura seleccionada!!!", 404);
}
$resultado = $em->getRepository(Usuario::class)->usuariosPorEstructuraDTable($nodo, $start, $length, $verTodos, $filtroNombre = $filtro['value']);
$data = array();
$numero = $start + 1;
foreach ($resultado['results'] as $usuario) {
$status = "enabled";
if ($usuario->getActivo() === false) {
if (!is_null($usuario->getDeletedAt())) {
$status = "baja";
} else {
$status = "disabled";
}
}
$data[] = array(
'DT_RowId' => $uuidEncoder->encode($usuario->getIdPublico()),
'numero' => $numero,
'nombre' => $usuario->getNombreCompleto(),
'identificador' => $usuario->getUsername(),
'rol' => $usuario->getRol()->getNombreRol(),
'status' => $status,
'editar_link' => array(
'src' => $this->generateUrl('usuario_editar', array('id' => $uuidEncoder->encode($usuario->getIdPublico()))),
'enabled' => ($this->get('security.authorization_checker')->isGranted(array('ROLE_ESP_NAC', 'ROLE_ESP_PROV', 'ROLE_ESP_MUN', 'ROLE_ESP_AS')) && $status !== "baja")
),
'eliminar_link' => array(
'src' => $this->generateUrl('usuario_eliminar', array('id' => $uuidEncoder->encode($usuario->getIdPublico()))),
'enabled' => ($this->get('security.authorization_checker')->isGranted(array('ROLE_ESP_NAC', 'ROLE_ESP_PROV', 'ROLE_ESP_MUN', 'ROLE_ESP_AS')) && $status !== "baja")
),
);
$numero += 1;
}
$dataRespuesta = array(
'draw' => $draw,
'recordsTotal' => $resultado['totalResults'],
'recordsFiltered' => $resultado['countResults'],
'data' => $data
);
return new JsonResponse($dataRespuesta);
} else {
throw $this->createNotFoundException("Recurso no encontrado.");
}
}
la definición de la función que obtiene los datos desde la Base de datos (fíjate para qué tengas una idea de cómo se completan las consultas teniendo en cuenta un posible filtro). A este ejemplo le falta ordenar por determinadas columnas, realmente no lo necesito en mi caso pero este método te va a dar un norte de cómo se realiza.
public function usuariosPorEstructuraDTable(EstructuraOrganizativa $estructura, $start, $length, $verTodos, $filtroNombre = '') {
$tipoEstructuraId = $estructura->getTipoEstructuraOrganizativa()->getId();
$mainQuery = $this->getEntityManager()->createQuery();
$countQuery = $this->getEntityManager()->createQuery();
$totalResultsQuery = $this->getEntityManager()->createQuery();
$mainDql = "SELECT u FROM AppBundle:Usuario u JOIN u.rol r JOIN u.estructuraOrganizativa nodo WHERE nodo.id = :estructuraId";
$countDql = "SELECT COUNT(u.id) FROM AppBundle:Usuario u JOIN u.rol r JOIN u.estructuraOrganizativa nodo WHERE nodo.id = :estructuraId";
$totalResultDql = "SELECT COUNT(u.id) FROM AppBundle:Usuario u JOIN u.rol r JOIN u.estructuraOrganizativa nodo WHERE nodo.id = :estructuraId";
if (!empty($filtroNombre)) {
$mainDql .= " AND ((u.nombreCompleto LIKE :filtroNombre) OR (u.username LIKE :filtroNombre))";
$countDql .= " AND ((u.nombreCompleto LIKE :filtroNombre) OR (u.username LIKE :filtroNombre))";
$mainQuery->setParameter('filtroNombre', $filtroNombre . '%');
$countQuery->setParameter('filtroNombre', $filtroNombre . '%');
}
if ($verTodos === true) {
$filter = $this->getEntityManager()->getFilters()->enable('softdeleteable');
$filter->disableForEntity(\AppBundle\Entity\Usuario::class);
}
$mainDql .= " ORDER BY u.id ASC";
$mainQuery->setDQL($mainDql);
$countQuery->setDql($countDql);
$totalResultsQuery->setDql($totalResultDql);
$mainQuery->useQueryCache(true);
$countQuery->useQueryCache(true);
$totalResultsQuery->useQueryCache(true);
$mainQuery->setParameter('estructuraId', $estructura->getId());
$countQuery->setParameter('estructuraId', $estructura->getId());
$totalResultsQuery->setParameter('estructuraId', $estructura->getId());
$mainQuery->setFirstResult($start);
$mainQuery->setMaxResults($length);
$resultados = $mainQuery->getResult();
$countResults = $countQuery->getSingleScalarResult();
$totalResults = $totalResultsQuery->getSingleScalarResult();
$resultado = array("results" => $resultados, "countResults" => $countResults, "totalResults" => $totalResults);
return $resultado;
}
Revisa la definición de cada columna del Datatables, verás como se genera del lado del cliente un boton (en este caso una etiqueta a con estilo botón) y cómo se manejan los eventos click de esos botones; ahora bien, las url (direcciones) de los controladores que procesarán las acciones de esos botones, se dejan definidos en el json
que retorna el servidor como parte del controller que genera el Datatables. Por último, el botón Nuevo
se define como parte de la barra de herramientas(por así llamarle) del Datatables, personalizando la propiedad **sDom**
del Datatables. La misma define qué partes se generarán.
Este Datatables tiene una particularidad: el estado del mismo se almacena en el localStorage del navegador del cliente, de manera tal que si el usuario abandona la vista y mas tarde vuelve al Datatables, mantendrá la última página de datos visitada, así como el posible filtro de la barra de búsqueda y si se mostraron o no los usuarios dados de baja o deshabilitados.