Flexigrid con pHp y consultas MySQL
Flexigrid es una librería de JQuery libre y gratuita, que permite mostrar en una grilla el resultado de una consulta de datos, listarlos en un tabla, paginarlos, ordenarlos e interactuar con los datos. Flexigrid puede utilizar distintas fuentes de datos como ser XML, consultas a la base de datos usando PHP y devolver los datos en formato JSON para que sean mostrados por Flexgrid.
Podemos descargar Flexigrid desde su pagina oficial.
Cómo utilizar Flexigrid con pHp y consultas MySQL
Después de descargar Flexigrid, descomprimimos el archivo zip, luego en un servidor local o remoto como vimos en el tutorial para instalarte Xampp para convertir tu ordenador en un servidor web, crearemos una carpeta para contener el ejemplo, necesitamos las carpetas CSS y JS que son las librerías de Flexigrid.
También debe tener una versión de jQuery podemos utilizar una versión online como:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>También podemos descargar la versión desde la pagina oficial jQuery.com. jQuery es una biblioteca de funciones de JavaScript.
A continuación vamos a crear una base de datos desde phpmyadmin para utilizar en el ejemplo
Base de datos: `FlexEmpresa`
CREATE DATABASE IF NOT EXISTS `FlexEmpresa` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci; Estructura de tabla para la tabla `clientes` CREATE TABLE IF NOT EXISTS `clientes` ( `id` int(11) NOT NULL, `nombre` varchar(100) DEFAULT NULL, `domicilio` varchar(255) NOT NULL, `ciudad` varchar(255) NOT NULL, `provincia` varchar(150) DEFAULT NULL ) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;Volcado de datos para la tabla `clientes`
INSERT INTO `clientes` (`id`, `nombre`, `domicilio`, `ciudad`, `provincia`) VALUES (1, 'Adela Resjez', 'Lore de Balca 435', 'Madrid', 'Madrid'), (2, 'Gretel Martinez', 'Juan XXIII 1232', 'Barcelona', 'Barcelona'), (3, 'Olivia Asri', 'Marina Sur 123', 'Aranjuez ', 'Madrid'), (4, 'Ledi Widaya', 'Calle 1 Norte 456', 'Sabadell', 'Barcelona'), (5, 'Alfonso Praudi', 'Salerno 48 Piso 1', 'Valencia', 'Valencia'), (6, 'Jose Albertez', 'Calle 13 586', 'Sevilla', 'Sevilla'); Indices de la tabla `clientes` ALTER TABLE `clientes` ADD PRIMARY KEY (`id`); ALTER TABLE `clientes` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=7;
A continuación deberemos crear un archivo index.php donde añadiremos el código con las cabeceras
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Clientes</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<script class="jsbin" src="js/jquery.min.js"></script>
<script class="jsbin" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
var $DialogoBox = jQuery.noConflict();
</script>
<link type="text/css" href="css/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-id.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*id de la tabla que afecta el script */
$("#flexempresa").flexigrid
(
{
/*pagina php donde se realiza la consulta sql */
url: 'consulta.php',
dataType: 'json', /* tipo de datos devuelto json, xml */
/* campo a mostrar en cada columna */
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'left'},
{display: 'nombre', name : 'nombre', width : 60, sortable : true, align: 'center'},
{display: 'domicilio', name : 'domicilio', width : 180, sortable : true, align: 'left'},
{display: 'ciudad', name : 'ciudad', width : 120, sortable : true, align: 'left'},
{display: 'provincia', name : 'provincia', width : 120, sortable : true, align: 'left'}
],
/*campo que se podra hacer busqueda */
searchitems : [
{display: 'ID', name : 'id'},
{display: 'Nombre', name : 'nombre', isdefault: true}
],
sortname: "ID", /* mostrar ordenador por id */
sortorder: "desc", /* ordenaor ascendente o descendente */
usepager: true, /* activa o descativa paginación */
title: 'Clientes', /* titulo de la tabla */
useRp: true, /* activa o descativa que el usuario pueda cambiar la cantidad paginación 10.20,50 */
rp: 10, /* cantidad de registros a mostrar por pagina */
width: 800, /* ancho de tabla */
height: 255 /*alto de tabla */
}
);
});
function crud(evento) {
if (evento == 'Nuevo') {
$DialogoBox("#formadd").dialog('open');
}
/* Debe seleccionar una fila antes de pulsar el boton */
if (evento == 'Editar') {
$('.trSelected').each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("alta nuevo cliente”);
});
}
/* Debe seleccionar una fila antes de pulsar el boton */
if (evento == 'Eliminar') {
$('.trSelected').each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("Eliminar Cliente ID " + id);
});
}
}
</script>
</head>
<body>
<table id="flexempresa" style="display:none"></table>
</body>
</html>A continuación deberemos crear el archivo consulta.php para realizar la consulta SQL cuando sea invocada por la librería.
<?php
error_reporting(0);
function Ejecutacsql($csql) {
$servidor = "localhost";
$usuario = "root";
$clave = "";
$db = "flexempesa";
$conectar = mysql_connect($servidor,$usuario,$clave) or die ("Error: could not connect to database");
$db = mysql_select_db($db);
$resultado = mysql_query($csql) or die ('query not running');
return $resultado;
mysql_close($conectar);
}
function TotalRegistros($fname,$tname,$where) {
$sql = "SELECT count($fname) FROM $tname $where";
$resultado = Ejecutacsql($sql);
while ($row = mysql_fetch_array($resultado)) {
return $row[0];
}
}
//Cuando pasamos de pagina se reordena la tabla y se muestra
// la nueva paginacion
//Ordenar por el campo indicado ascendente o descendente
$pagina = $_POST['page'];
$rp = $_POST['rp'];
$ordenarcampo = $_POST['sortname'];
$ordenarmetodo = $_POST['sortorder'];
//Ordenar por id en forma descendente por defecto
if (!$ordenarcampo) $ordenarcampo = 'id';
if (!$ordenarmetodo) $ordenarmetodo = 'desc';
if($_POST['query']!=''){
$where = "WHERE `".$_POST['qtype']."` LIKE '%".$_POST['query']."%' ";
} else {
$where ='';
}
if($_POST['letter_pressed']!=''){
$where = "WHERE `".$_POST['qtype']."` LIKE '".$_POST['letter_pressed']."%' ";
}
if($_POST['letter_pressed']=='#'){
$where = "WHERE `".$_POST['qtype']."` REGEXP '[[:digit:]]' ";
}
$sort = "***** BY $ordenarcampo $ordenarmetodo";
if (!$pagina) $pagina = 1;
if (!$rp) $rp = 10;
$start = (($pagina-1) * $rp);
$limit = "LIMIT $start, $rp";
//Consulta SQL a realizar
$sql = "select id, nombre, domicilio, ciudad, provincia from clientes $where $sort $limit";
$resultado = Ejecutacsql($sql);
$total = TotalRegistros('id','clientes',$where);
//Limpíamos la cache
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
//Creamos los el formato json con los parametros y datos necesarios
$json = "";
$json .= "{\n";
$json .= "page: $pagina,\n";
$json .= "total: $total,\n";
$json .= "rows: [";
$rc = false;
while ($row = mysql_fetch_array($resultado)) {
if ($rc) $json .= ",";
$json .= "\n{";
$json .= "id:'".$row['id']."',";
$json .= "cell:['".$row['id']."'";
$json .= ",'".addslashes($row['nombre'])."'";
$json .= ",'".addslashes($row['domicilio'])."'";
$json .= ",'".addslashes($row['ciudad'])."'";
$json .= ",'".addslashes($row['provincia'])."']";
$json .= "}";
$rc = true;
}
$json .= "]\n";
$json .= "}";
//enviamos las datos al script para que los muestre en la tabla
echo $json;
?>El resultado de mostrar en el navegador deberá ser el siguiente:
