Diferencia entre revisiones de «Datagrid Simple y jquery»

De KumbiaPHP Framework Wiki
 
(No se muestran 11 ediciones intermedias de 6 usuarios)
Línea 1: Línea 1:
Partials para crear de forma simple un datagrid con php y algo de jquery
+
[[KumbiaPHP_Framework_Versión_1.0_Spirit#views.2Fpartials.2F | Partials]] para crear de forma simple un datagrid con php y algo de jquery
  
 
=== En el controlador ===
 
=== En el controlador ===
 
+
Para efecto del ejemplo tenemos el siguiente controller, pero puede ser cualquiera
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
Línea 18: Línea 18:
 
      'Nombre' => 'nombre',
 
      'Nombre' => 'nombre',
 
      'Telefono' => 'telefono',
 
      'Telefono' => 'telefono',
      'Direccion' => 'direccion'));
+
      'Direccion' => 'direccion');
 
}
 
}
  
Línea 29: Línea 29:
 
/app/view/cliente/page.phtml
 
/app/view/cliente/page.phtml
 
<source lang="php">
 
<source lang="php">
<?  View::partial('datagrid/ajax'false,array('Model'=>$result, 'Campos'=>$campos)); ?>
+
<?  View::partial('datagrid/ajax',false,array('Model'=>$result, 'Campos'=>$campos)); ?>
 
</source>
 
</source>
  
Línea 42: Línea 42:
 
<link type="text/css" rel="stylesheet"  href="http://www.datatables.net/release-datatables/media/css/demo_table.css" />
 
<link type="text/css" rel="stylesheet"  href="http://www.datatables.net/release-datatables/media/css/demo_table.css" />
 
<div id="datagrid">
 
<div id="datagrid">
<table  border="1px" class="simple">"
+
<table  border="1px" width="100%" class="ajax">
 
<thead><tr>
 
<thead><tr>
 
<?php foreach( $Campos  as $titulo => $valor): ?>
 
<?php foreach( $Campos  as $titulo => $valor): ?>
<th> <?php echo $titulo >?</th>
+
<th> <?php echo $titulo ?></th>
 
<?php endforeach; ?>
 
<?php endforeach; ?>
 
</tr></thead>
 
</tr></thead>
Línea 59: Línea 59:
 
</div>
 
</div>
 
<script>
 
<script>
$(document).ready(function() {
+
$(function() {
$('#datagrid').dataTable();
+
$('#ajax').dataTable();
 
} );
 
} );
  
Línea 68: Línea 68:
  
 
''la pagina del autor del script para jquery es http://www.datatables.net/''
 
''la pagina del autor del script para jquery es http://www.datatables.net/''
 +
 +
== Resultado Final ==
 +
 +
[[Archivo:Datagrid_simple_jquery.JPG|700px|thumb|center|Resultado Final]]
 +
 +
 +
 
[[Categoría:Partials]]
 
[[Categoría:Partials]]
 +
[[Categoría:jQuery]]

Revisión actual del 14:54 6 dic 2010

Partials para crear de forma simple un datagrid con php y algo de jquery

En el controlador[editar]

Para efecto del ejemplo tenemos el siguiente controller, pero puede ser cualquiera

<?php
class ClienteController extends ApplicationController {

	public function page(){
        // Paso el resultado de la consulta que sera mostrada en el datagrid
        $this->result = Load::model('cliente')->find();

        /* paso un array con los campos que quiero mostrar en la datagrid
        *  El key de cada campo del ser el nombre a mostrarse en el tr de la tabla
        *  El value el campo de la tabla
        */ 
	$this->campos = array('Codigo' => 'id',
			      'Nombre' => 'nombre',
			      'Telefono' => 'telefono',
			      'Direccion' => 'direccion');
	}

}
//  Se maneja todo desde la vista


En la vista[editar]

/app/view/cliente/page.phtml

	<?  View::partial('datagrid/ajax',false,array('Model'=>$result, 'Campos'=>$campos)); ?>

Partials[editar]

/app/view/partials/datagrid/ajax.phtml

	<script type="text/javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.js"></script>
	<script type="text/javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
	<link type="text/css" rel="stylesheet"  href="http://www.datatables.net/release-datatables/media/css/demo_page.css" />
	<link type="text/css" rel="stylesheet"  href="http://www.datatables.net/release-datatables/media/css/demo_table.css" />
	<div id="datagrid">
		<table  border="1px" width="100%" class="ajax">
		<thead><tr>
			<?php foreach( $Campos  as $titulo => $valor): ?>
				<th> <?php echo $titulo ?></th>
			<?php endforeach; ?>
		</tr></thead>
                <tbody>
			<?php foreach( $Model as $model): 
				 echo tr_color_class( 'tr_primary', 'tr_secondary' );
				 foreach($Campos as  $campos): ?>
					<td><?php echo $model->$campos ?></td>
				<?php endforeach; ?>
				</tr>
			<?php endforeach; ?>
		</tbody></table>
	</div>
<script>
	$(function() {
		$('#ajax').dataTable();
	} );

</script>

la pagina del autor del script para jquery es http://www.datatables.net/

Resultado Final[editar]

Resultado Final