BlueProgramming: tabla

En mi experiencia en mejor plugin para la manipulacion de datos en tablas HTML es DataTables. El mismo le permitira ordenar, buscar y mostrar los datos de sus tablas de una forma dinamica, gracias a que es un plugin de la libreria de javascript JQuery.

A continuacion un ejemplo de como instalar DataTable con datos traidos desde la base de datos.

1. Descargar la version mas reciente de DataTable en la siguiente direccion: http://datatables.net/download/, extraer el archivo .zip

2. Ejecutar el siguiente script para la creacion de la base de datos:

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8 */;

-- Database: `datatable_ejemplo`

CREATE DATABASE IF NOT EXISTS `datatable_ejemplo` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE `datatable_ejemplo`;

-- --------------------------------------------------------

-- Table structure for table `cliente`

CREATE TABLE IF NOT EXISTS `cliente` (

`codigo` int(11) NOT NULL AUTO_INCREMENT,

`nombre` varchar(25) NOT NULL,

`apellido` varchar(25) NOT NULL,

`direccion` varchar(45) NOT NULL,

`telefono` varchar(12) NOT NULL,

PRIMARY KEY (`codigo`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

-- Dumping data for table `cliente`

INSERT INTO `cliente` (`codigo`, `nombre`, `apellido`, `direccion`, `telefono`) VALUES

(1, 'Maria', 'Lopez', 'c/ 20 Los Ramos', '829-234-2344'),

(2, 'Juan', 'Gomez', 'c/ D Las Flores', '849-322-2344'),

(3, 'Flavia', 'Pichardo', 'c/77 El tronco', '809-345-6420');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

3. Abrir un documento php con el formato HTML correspondiente.

4. Hacer la conexion a la base de datos:

<?php

mysql_connect('localhost','root','') or die ("No se pudo conectar a la base de datos");

mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");

5. Crear la tabla html que contendra nuestros datos. Es muy importante que la tabla cuente con las etiquetas <theader> y <tfooter> para que el DataTable pueda funcionar. El siguiente es mi codigo para el ejemplo.

<thead>

<tr>

<th> <strong>Codigo </strong> </th>

<th> <strong>Nombre </strong> </th>

<th> <strong>Apellido </strong> </th>

<th> <strong>Direccion </strong> </th>

<th> <strong>Telefono </strong> </th>

</tr>

</thead>

<tbody>

<?php

$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";

$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();

while ($fila = mysql_fetch_array($re)) {

echo '<tr">

<td>' . $fila['codigo'] . '</td>

<td>' . $fila['nombre'] . '</td>

<td>' . $fila['apellido'] . '</td>

<td>' . $fila['direccion'] . '</td>

<td>' . $fila['telefono'] . '</td>

</tr>';

}

</tbody>

</table>

6. Luego hay que anadir dentro de las etiquetas <head> el enlace a los estilos css para el dataTable de la siguiente manera:

@import "DataTables-1.9.4/media/css/jquery.dataTables.css";

</style>

7. Finalmente necesario insertar justo despues del cierre de la etiqueta <body> los siguientes enlaces:

$(document).ready(function() {

$('#datatables').dataTable({

"aaSorting": [[0, "desc"]],

"sPaginationType": "full_numbers",

"bAutoWidth": false,

"oLanguage": {

"sLengthMenu": "Mostrar _MENU_ ",

"sZeroRecords": "No existen datos para esta consulta",

"sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",

"sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",

"sInfoFiltered": "(De un maximo de _MAX_ registros)",

"sSearch": "Buscar: _INPUT_",

"sEmptyTable": "No hay datos disponibles para esta tabla",

"sLoadingRecords": "Por favor espere - Cargando...",

"sProcessing": "Actualmente ocupado",

"sSortAscending": " - click/Volver a ordenar en orden Ascendente",

"sSortDescending": " - click/Volver a ordenar en orden descendente",

"oPaginate": {

"sFirst": "Primero",

"sLast": "Ultimo",

"sNext": "Siguiente",

"sPrevious": "Anterior"

}

});

})

</script>

El resultado deberia lucir asi:

Este es mi codigo completo:

<?php
mysql_connect('localhost', 'root', '') or die("No se pudo conectar a la base de datos");
mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");
?>
<html>
<title> DataTable Ejemplo </title>
<head>
<style type="text/css" title="currentStyle">

@import "DataTables-1.9.4/media/css/jquery.dataTables.css";

</style>
</head>

<body>

<table id="datatables">
<thead>
<tr>
<th> <strong>Codigo </strong> </th>
<th> <strong>Nombre </strong> </th>
<th> <strong>Apellido </strong> </th>
<th> <strong>Direccion </strong> </th>
<th> <strong>Telefono </strong> </th>
</tr>
</thead>
<tbody>
<?php

$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";
$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();

while ($fila = mysql_fetch_array($re)) {

echo '<tr">

<td>' . $fila['codigo'] . '</td>
<td>' . $fila['nombre'] . '</td>
<td>' . $fila['apellido'] . '</td>
<td>' . $fila['direccion'] . '</td>
<td>' . $fila['telefono'] . '</td>

</tr>';

}

?>
</tbody>
</table>
</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script src="DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"> </script> 

<script type="text/javascript" charset="utf-8"> 

$(document).ready(function() {

$('#datatables').dataTable({

"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"bAutoWidth": false,

"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ ",
"sZeroRecords": "No existen datos para esta consulta",
"sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(De un maximo de _MAX_ registros)",
"sSearch": "Buscar: _INPUT_",
"sEmptyTable": "No hay datos disponibles para esta tabla",
"sLoadingRecords": "Por favor espere - Cargando...",
"sProcessing": "Actualmente ocupado",
"sSortAscending": " - click/Volver a ordenar en orden Ascendente",
"sSortDescending": " - click/Volver a ordenar en orden descendente",

"oPaginate": {
"sFirst": "Primero",
"sLast": "Ultimo",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},

}
});

})

</script>

</html>

Este programa funciona insertando un numero al TextBox y al presionar el boton "Multiplicar" aparecera la tabla del 1 al 12 de dicho numero en el Listbox. Para esto utilizaremos 1 Textbox, 1 Listbox y 1 CommandButton.

Para hacer que funcione debemos digitar los siguientes codigos en el Command1:

Private Sub Command1_Click()

List1.Clear
Dim n As Integer
n = 0
Do While n < 12
n = n + 1
r = Val(Text1.Text) * n
List1.AddItem (Text1.Text & " x " & n & " = " & r)
Loop
Text1.Text = ""
Text1.SetFocus

End Sub

Ahora explicare el codigo:

List1.Clear: Esto hara que cada vez que se ejecute el codigo se limpie el listbox.

Dim n as Integer: Aqui estamos declarando la variable "n" que almacenara valores Integer(enteros).

n= 0: Aqui le damos un valor a la variable "n" de 0. De esta manera inicializamos esta variable que debe contener un valor para utilizar el Do While.

Do While n < 12: Aqui decimos que mientras n sea menor que 12 se ejecute el codigo que esta debajo antes del Loop.

n= n +1: Este codigo hara que se le sume 1 a la variable "n". De esta forma "n" tenia un valor de 0 y se le sumara 1 mientras "n" no sea menor que 12.

r = Val(Text1.Text) * n: "r" es la constante donde estara almacenada la operacion de multiplicacion, lo demas representa la operacion.

List1.AddItem (Text1.Text & " x " & n & " = " & r): Aqui es donde le decimos al programa que añada al Listbox el valor del Textbox, la letra x, el valor de la variable n, el signo de = y el valor de la variable r. Lo que estamos haciendo aqui es concatenando las variables y los signos. El signo & es para concatenar.

Loop: En caso de que no se cumpla la condicion establecida en el Do while se devuelve atras, cuando si se cumple la condicion entoces se termina el Do while.

Text1.Text = "": Esto hara que cada vez que presionemos el boton multilicar se limpie el Textbox.

Text1.SetFocus: Este codigo devuelve el cursor al Text1.

Si insertamos el numero 2 este sera el resultado:

BlueProgramming

Manipulacion de tablas HTML con DataTables

Tabla de multiplicar en Visual Basic 6.0

Tabla dinamica PHP

Populares

Archivo

Acerca de mí