Ejemplo jQgrid: Mostrar datos de una base de datos MySQL

Stay hungry, stay foolish

Steve Jobs

En esta ocasión,  el ejemplo trata de como crear de forma rápida un datagrid en PHP utilizando jqGrid.

jqGrid

Es un control que permite mostrar y manipular información de forma tabular, los datos se cargan de forma dinamica mediante  Ajax y se integra con PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

jqGrid:  Sitio oficial   Documentación  Demos

 

Ejemplo 1: Mostrar datos de una base de datos MySQL

BASE DE DATOS

Tabla: tblclientes

CREATE TABLE tblcliente (
idCliente smallint(4) unsigned zerofill NOT NULL AUTO_INCREMENT,
nombre varchar(45) ,
direccion varchar(50),
telefono varchar(16),
email varchar(45),
PRIMARY KEY (`idCliente`));

 

ARCHIVO HTML

Encabezados

Lo primero que tenemos que hacer es enlazar las hojas de estilo, la primera es la hoja de estilos de algun tema de jQuery UI, la segunda hoja la utiliza el grid. Después enlazamos los archivos javascript, el primero es la libreria jQuery, la siguiente es jQuery UI, posteriormente se incluye el archivo de idioma de jqGrid, este se utiliza en la paginacion y al final incluimos el archivo jqGrid

<html>
   <head>
        <!-- Hojas de estilo -->
        <link rel="stylesheet" type="text/css" media="screen" href="css/flick/jquery-ui-1.8.16.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
        <!-- Archivos javascript -->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui.min.js" type="text/javascript"></script>
        <script src="jqgrid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
        <script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

 

 

Codigo de jqGrid

Una vez que ya enlazamos lo archivos necesarios para el grid, procedemos a configurar la opciones del grid de la siguiente forma.

  • url: Es la ruta del archivo PHP que procesara la petición ajax
  • datatype: Indica el tipo de información que regresara el servidor
  • mytype: Indica como se hará la petición ajax, “POST” o “GET”
  • colNames: Es un arreglo con los titulos de las columnas del grid
  • colModel: Es un arreglo que describe las opciones de cada columna, algunas opciones son las siguientes
    • name: Nombre de la columna
    • index: Es el nombre que se envía al servidor cuando se ordenan los datos
    • width: Indica el ancho de la columna
    • resizable: Indica si el ancho de la columna se puede redimensionar, los posible valores son true o false
    • align: Alineación del texto, los posible valores son: left, center, right
  • pager: Indica que elemento HTML que sera la barra de paginacion, se utiliza su atributo id
  • rowNum: Indica cuantas filas se mostraran por pagina
  • sortname: Indica el campo por el cual se ordenaran los datos
  • sortorder: Indica si se ordenaran de forma ascendente “asc” o descendente “desc”
  • viewrecords: Indica se se mostrara el numero de registros que tiene la tabla, puede ser true o false
  • captio: Indica el titulo del grid
        <script type="text/javascript">
            $(document).ready(function(){
           jQuery("#tblclientes").jqGrid({
                    url:'clientes.php',
                    datatype: 'json',
                    mtype: 'POST',
                    colNames:['ID','NOMBRE', 'DIRECCION','TELEFONO','EMAIL'],
                    colModel:[
                        {name:'idCliente', index:'idCliente', width:50, resizable:false, align:"center"},
                        {name:'nombre', index:'nombre', width:160,resizable:false, sortable:true},
                        {name:'direccion', index:'direccion', width:150},
                        {name:'telefono', index:'telefono', width:70},
                        {name:'email', index:'email', width:120}
                    ],
                    pager: '#paginacion',
                    rowNum:10,
                    rowList:[15,30],
                    sortname: 'idCliente',
                    sortorder: 'asc',
                    viewrecords: true,
                    caption: 'CLIENTES'
                });
            });
        </script>

CODIGO PHP

En el archivo PHP se recibe la petición y se realizan  dos consultas a la base de datos, la primera obtiene el numero de registros a mostrar  y la segunda recupera la información de los campos que se van a visualizar, después se crea la respuesta y se regresa como JSON.

 

<?php
    $page = $_POST['page'];  // Almacena el numero de pagina actual
    $limit = $_POST['rows']; // Almacena el numero de filas que se van a mostrar por pagina
    $sidx = $_POST['sidx'];  // Almacena el indice por el cual se hará la ordenación de los datos
    $sord = $_POST['sord'];  // Almacena el modo de ordenación

    if(!$sidx) $sidx =1;

    // Se crea la conexión a la base de datos
    $conexion = new mysqli("servidor","usuario","password","basedatos");

    // Se hace una consulta para saber cuantos registros se van a mostrar
    $result = $conexion->query("SELECT COUNT(*) AS count FROM tblcliente");

    // Se obtiene el resultado de la consulta
    $fila = $result->fetch_array();
    $count = $fila['count'];

    //En base al numero de registros se obtiene el numero de paginas
    if( $count >0 ) {
	$total_pages = ceil($count/$limit);
    } else {
	$total_pages = 0;
    }
    if ($page > $total_pages)
        $page=$total_pages;

    //Almacena numero de registro donde se va a empezar a recuperar los registros para la pagina
    $start = $limit*$page - $limit; 

    //Consulta que devuelve los registros de una sola pagina
    $consulta = "SELECT idcliente, nombre, direccion, telefono, email FROM tblCliente ORDER BY $sidx $sord LIMIT $start , $limit;";

    $result = $conexion->query($consulta);

    // Se agregan los datos de la respuesta del servidor
    $respuesta->page = $page;
    $respuesta->total = $total_pages;
    $respuesta->records = $count;
    $i=0;
    while( $fila = $result->fetch_assoc() ) {
        $respuesta->rows[$i]['id']=$fila["idCliente"];
        $respuesta->rows[$i]['cell']=array($fila["idCliente"],$fila["nombre"],$fila["direccion"],$fila["telefono"],$fila["email"]);
        $i++;
    }

    // La respuesta se regresa como json
    echo json_encode($respuesta);
?>

Puedes descargar el ejemplo