1. Primeros pasos
Para empezar, crearemos una vista, en nuestro caso como ejemplo vamos a crear la vista «dparents.php» dentro de «/app/views/admin/», contendrá una variable llamada «$parents» en la cual mediante el metodo «Parents::getAll()» guardaremos todos los registros, ademas, la tabla tiene que incluir la clase de DataTables «tsort» para habilitar el DataTables local:
<?php
$parents = Parents::getAll();
?>
<table class="table table-hover tsort">
<thead>
<tr>
<th><?= _e('Name');?></th>
<th><?= _e('Lastname'); ?></th>
<th><?= _e('Email'); ?></th>
<th></th>
</tr>
</thead>
<tbody>
<!-- some code here -->
</tbody>
</table>
Nota: (El método _e() siempre se tiene que incluir para que el diccionario realice las traducciones).
2.Rellenar la tabla
Para rellenar la tabla incluimos un «foreach» que recorra todos los registros de «$parents» y nos cree dinámicamente las rows de la tabla, el código debería quedar así:
<?php
$parents = Parents::getAll();
?>
<table class="table table-hover tsort">
<thead>
<tr>
<th><?= _e('Name');?></th>
<th><?= _e('Lastname'); ?></th>
<th><?= _e('Email'); ?></th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach($parents as $d){ ?>
<tr>
<td><?= $d['parent_name'];?></td>
<td><?= $d['parent_lastname'];?></td>
<td><?= $d['parent_email'];?></td>
<td></td>
</tr>
<?php
} ?>
</tbody>
</table>Como podremos ver a continuacion, la tabla ha sido rellenada con los campos de todos los padres y con la cabecera de Data tables, con su paginacion y su barra de busqueda, pero solo en local:
3.Incluir Scripts
Para incluir una etiqueta script deberemos incluir al final de nuestro código el método en php «obj_start()» y después cerrarlo con «ob_get_clean()»:
<?php $js = ob_get_clean();
$app['onload'][] = $js;
?>Nota: ( Con «$app[‘onload’][] = $js» indicamos que el script se carga al inicio )
4.Explicando asort
Ahora entre esas dos etiquetas podremos añadir codigo JS, que es donde crearemos la función de DataTables, cambiando la clase de la tabla de «tsort» a «asort» cambiamos del modo local al modo ajax:
<?php ob_start();?>
$(".asort").dataTable(
{
"processing" : true,
"serverSide" : true,
"stateSave" : true,
"ajax" : "ajax.php?dt=parents",
"order" : [[ 1, "desc" ]],
"aLengthMenu": [[20, 50, 200, -1], [20, 50, 200, "All"]],
"iDisplayLength" : 20,
"columns": [
{ "className": "text-center", "data": "parent_name" },
{ "className": "text-center", "data": "parent_lastname" } ,
{ "className": "text-center", "data": "parent_email" } ,
{
"render": function (data){
return "<a href='../admin/parents/edit/" %2B data %2B "' class='btn btn-sm aqua twhite'>" %2B "<?= _e('Edit');?>" %2B data.parent_id %2B " MAS >> " %2B data.parent_name %2B "</a>";
}
},
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("id",'<?= 'PRNT'; ?>-_' %2B aData.parent_id);
return nRow;
},
"dom" : '<"top"i>flprt<"bottom"flp><"clear">'
}
);
<?php $js = ob_get_clean();
$app['onload'][] = $js;
?>Parámetros
-
«stateSave»: (true) Para conservar la posición en la tabla
-
«ajax»: Para hacer la petición ajax, aquí le pasamos el identificador del controlador dataTables.php como «dt?=parents»
-
«order»: El primer parámetro indica la columna por la que se ordenaran los datos, la primera columna es 0, si colocamos un 1 seria la segunda, y el siguiente parámetro el tipo de orden (ascendente, descendente…)
-
«aLengthMenu»: Aquí indicaremos rangos de cantidades de registros a mostrar, siendo -1 indefinido y «All» todos los registros devueltos.
-
«iDisplayLength»: La cantidad de registros que se visualizará en la tabla por defecto.
-
«columns»: Las columnas que se mostrarán.className Es la clase que le daremos a la columna (Forma simple sin manipular los datos).data Es el dato que se mostrará en la columna.render En este caso, nos muestra el botón para editar contacto y nos envía a la vista de edición.
5. Identificador del modelo
[$dt = ‘parametro’] Es el identificador del modelo en DataTables.php el cual nos devolverá la información de la tabla en las columnas mediante el método getAll(), también se le pueden pasar parámetros:
<?php
$(".asort").dataTable(
{
"processing" : true,
"serverSide" : true,
"stateSave" : true,
"ajax" : "ajax.php?dt=parents", <-------------------------------------------
"order" : [[ 1, "desc" ]],
"aLengthMenu": [[20, 50, 200, -1], [20, 50, 200, "All"]],
"iDisplayLength" : 20,
"columns": [
{ "className": "text-center", "data": "parent_name" },
{ "className": "text-center", "data": "parent_lastname" } ,
{ "className": "text-center", "data": "parent_email" } ,
{
"render": function (data){
return "<a href='../admin/parents/edit/" %2B data %2B "' class='btn btn-sm aqua twhite'>" %2B "<?= _e('Edit');?>" %2B data.parent_id %2B " MAS >> " %2B data.parent_name %2B "</a>";
}
},
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("id",'<?= 'PRNT'; ?>-_' %2B aData.parent_id);
return nRow;
},
"dom" : '<"top"i>flprt<"bottom"flp><"clear">'
}
);
6. Manipulacion simple de datos
Si no se requiere manipular los datos recibidos en las columnas usaremos el siguiente procedimiento:
<?php
{ "className": "text-center", "data": "receipt_date_end" }7. Manipulación avanzada
Si se requiere manipular la información recibida usaremos el siguiente procedimiento:
<?php
{ "data": "receipt_id",
"render": function (data){
return "<a href='../admin/finance/receipts/edit/" %2B data %2B "'>RCB" %2B pad(data,5) %2B "</a>";
}
},
8. Funcion dataKeys()
En Parents.php, en la función dataKeys declaramos las columnas de $data, declaramos las opciones de búsqueda con ‘search’y con concat establecemos que dos columnas se combinaran en la búsqueda
<?php
public function dataKeys(){
$keys = array(
'parent_name',
'parent_lastname',
'parent_email',
''
);
// Declaro columnas
$data = array(
'keys' => $keys,
// Declaro las que tienen opción de búsquedas en base a las opciones de $keys
'search'=> array(0,1,2),
// Cuales son combinadas en la búsqueda [solo se puede 1 set de combinación]
'concat'=> array(0,1)
);
return $data;
}9. Funcion getAll()
El controlador, en este caso Parents.php, contirene la funcion getAll que es la que envia toda la informacion de la consulta a $data:
<?php
class Parents {
// Config
static $tab = 'cl_parents';
static $cat = 'parents';
static $pre = 'parent';
static $col = 'parent_id';
static $fnd = 'parent_title';
// Querys
function getAll ($p){ return Globals::getAll($p, self::$tab, self::$col); } <---------------------
function getRow ($p){ return Globals::getRow($p, self::$tab, self::$col); }
function getMeta($p){ return false; Globals::getMeta($p, self::$tab, self::$col); }
function search ($p){ return Globals::search($p, self::$tab, self::$fnd); }
// Form Actions
function buildFormMeta($key){ return Globals::buildFormMeta($key,self::$tab, self::$col, self::$cat, self::$pre); }
function buildForm(){ return Globals::buildForm(self::$tab, self::$col, self::$cat, self::$pre); }
function getActions(){ Form::getActions(self::$tab); }
function doDelete($p){ $p['table'] = self::$tab; Sql::delete($p); }
public function dataKeys(){
$keys = array(
'parent_name',
'parent_lastname',
'parent_email',
''
);
// Declaro columnas
$data = array(
'keys' => $keys,
// Declaro las que tienen opción de búsquedas
'search'=> array(0,1,2),
// Cuales son combinadas en la búsqueda [solo se puede 1 set de combinación]
'concat'=> array(0,1)
);
return $data;
}