La implementacion de los datatables no es cosa de otro mundo y cada dia se utiliza mas por facil utilizacion y respuesta en tiempo real de consultas a la base de datos. En este ejemplo utilizaremos al jquery con el data table donde pueden descargar gratis desde aqui https://datatables.net/download/
En este ejemplo utilizaremos lo mas sencillo que son datos de una persona como nombre, apellido, direccion, telefono y fecha de nacimiento, lo primero que debemos hacer es llamar a nuestro archivo jquery con todos sus complementos necesarios.
Utilizaremos lo siguiente
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="vendor/DataTables/jquery.datatables.min.css">
<script src="vendor/DataTables/jquery.dataTables.min.js" type="text/javascript"></script>Por lo general y en las buenas practicas aclarando un poco esto se coloca al final de todo el codigo html pero ya que estamos realizando un tutorial lo dejamos en la primera linea.
Lo siguiente seria crear el script para hacer funcionar.
<script>
//webdebe.xyz
$(document).ready(function ()
{
$('#tbl-contact thead th').each(function () {
var title = $(this).text();
$(this).html(title+' <input type="text" class="col-search-input" placeholder="Search ' + title + '" />');
});
var table = $('#tbl-contact').DataTable({
"scrollX": true,
"pagingType": "numbers",
"processing": true,
"serverSide": true,
"ajax": "server.php",
order: [[2, 'asc']],
columnDefs: [{
targets: "_all",
orderable: false
}]
});
table.columns().every(function () {
var table = this;
$('input', this.header()).on('keyup change', function () {
if (table.search() !== this.value) {
table.search(this.value).draw();
}
});
});
});
</script>La tabla que usaremos debe tener un id llamado tbl-contac para que pueda funcionar y poder reconocer el jquery donde queremos trabajar.
El codigo html quedaria de esta manera
<div class="datatable-container">
<h2>Columna de procesamiento</h2>
<table name="tbl-contact" id="tbl-contact" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Direccion</th>
<th>Telefono</th>
<th>Fecha de Nacimiento</th>
</tr>
</thead>
</table>
</div>Ya tenemos todo termina del lado del cliente ahora debemos procesar del lado del servidor los datos que precisamos para eso vamos a crear un archivo llamado server.php, para poder conectarnos a la base de datos utilizamos una clase para la conexion que lo podes encontrar aqui https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/ssp.class.php
<?php
##webdebe.xyz
//Tabla en donde vamos a procesar los datos
$table = 'tbl_contact';
$primaryKey = 'id';
$columns = array(
array( 'db' => 'first_name', 'dt' => 0 ),
array( 'db' => 'last_name', 'dt' => 1 ),
array( 'db' => 'address', 'dt' => 2 ),
array( 'db' => 'phone', 'dt' => 3,),
array( 'db' => 'date_of_birth','dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'd-m-Y', strtotime($d));
}
)
);
//Datos de acceso a la base de datos
$sql_details = array(
'user' => 'root',
'pass' => '',
'db' => 'webdebe-contact',
'host' => 'localhost'
);
require( 'vendor/DataTables/server-side/scripts/ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
)
?>El codigo completo del html quedaria de esta forma
<!DOCTYPE html>
<head>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="vendor/DataTables/jquery.datatables.min.css">
<script src="vendor/DataTables/jquery.dataTables.min.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Busqueda en base de datos</title>
<script>
//webdebe.xyz
$(document).ready(function ()
{
$('#tbl-contact thead th').each(function () {
var title = $(this).text();
$(this).html(title+' <input type="text" class="col-search-input" placeholder="Search ' + title + '" />');
});
var table = $('#tbl-contact').DataTable({
"scrollX": true,
"pagingType": "numbers",
"processing": true,
"serverSide": true,
"ajax": "server.php",
order: [[2, 'asc']],
columnDefs: [{
targets: "_all",
orderable: false
}]
});
table.columns().every(function () {
var table = this;
$('input', this.header()).on('keyup change', function () {
if (table.search() !== this.value) {
table.search(this.value).draw();
}
});
});
});
</script>
</head>
<body>
<div class="datatable-container">
<h2>Columna de procesamiento</h2>
<table name="tbl-contact" id="tbl-contact" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Direccion</th>
<th>Telefono</th>
<th>Fecha de Nacimiento</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
