DataGrid(jTPS) en utilizando javascript (jquery)

Diciembre 22nd, 2008 | por jjeb™ |

jTPS es un plugin para jqury que nos permite implementar un “DataGrid “, tienen como características tiene, ordenamiento ascendente y descendente, paginación, variar las cantidades de la paginación.:

Para su utilización necesitaremos los descargar los archivos de la siguiente dirección: http://www.overset.com/2008/08/30/animated-sortable-datagrid-jquery-plugin-jtps también los archivos vienen con el ejemplo que esta al final del documento.

La estructura de la tabla a utilizar es la siguiente:

<table id="demoTable" style="border: 1px solid #ccc;" border="0" cellspacing="0" width="700">
<thead>
<tr>
<th><strong>Col 1</strong></th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>información 1</td>
<td>información 1</td>
<td>información 1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div class="paginationTitle">Página</div></td>
</tr>
</tfoot></table>

Agregamos las librerías (jquery.js, jTPS.js) y la hoja de estilo (jTPS.css) que descargamos anteriormente:

<script language="JavaScript" type="text/javascript" src="jTPS/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jTPS//jTPS.js"></script>
<link rel="stylesheet" type="text/css" href="jTPS/jTPS.css">

Lo siguiente es agregar el código en javascript (jquery) :

$(document).ready(function () {
			$('#demoTable').jTPS( {perPages:[5,12,15,50,'Todos'], // demoTable es el id de nuestra tabla, y especificamos los modos de paginación
								   scrollStep:1,scrollDelay:30, // Retardo en el desplazamiento de la páginas..
								   perPageText:'Cantidad por página ' // Texto que aparece en la sección inferior de la tabla..
								   } );
 
			$('#demoTable tbody tr:not(.stubCell)').bind('mouseover mouseout',
				function (e) {
					e.type == 'mouseover' ? $(this).children('td').addClass('hilightRow') : $(this).children('td').removeClass('hilightRow');// Iluminado  de las filas..
				}
			);
		});

Por último dejo una imagen de cómo se vería el grid, el demo y los archivos para su descarga:

DataGrid(jTPS) en utilizando javascript (jquery)

Demo| Descarga

Etiquetas: , , , ,

  1. 2 Respuestas en “DataGrid(jTPS) en utilizando javascript (jquery)”

  2. Por segan(), Jun 9, 2009 | Responder

    Muchas gracias por el POST, felicidades y animo con el blog!!!

  3. Por Cristian, Ene 8, 2010 | Responder

    Me gustaria saber por que en IE8 no funciona los estilo la fila de la tabla son muy grandes y si lo corro por ejemplo en google Chrome o Moxilla anda perfecto… muchas Gracias

Publica un Comentario