Facebook Google+


Libreria para generar tablas HTML con PHP
#1


Necesitaba generar una tabla HTML con PHP y a falta de tiempo para buscar una libreria y estudiarla, hice una demasiado sencilla, aqui un ejemplo de uso:

Código PHP:
    <?php  
        require_once
("HtmlTable.php");
    
        $tabla 
= new HtmlTable('table');
        $tabla->setHead('th_blue',['nombre','apellido','edad']);        
        $tabla
->setRows([['nombre'=>'Jose','apellido'=>'Antonio','edad'=>25],
                         ['nombre'=>'Maria','apellido'=>'Gomez','edad'=>23],
                         ['nombre'=>'Esteban','apellido'=>'Cerutti','edad'=>38]                                                    
                        
]);
        $tabla->addRow(     ['nombre'=>'Pepito','apellido'=>'Ferandez','edad'=>21]);            
                        
        
// opcional
        $tabla->setRowClases(['info','','warning']);        
        
        echo $tabla


Ahora el código de la libreria:

Código PHP:
<?php

    
// @author HardForo.com

    
class HtmlTable 
    
{        
        private 
$_tableClassName;
        private 
$_tableAttr;
        private 
$_headClassName;
        private 
$_thAttr;
        private 
$_cols = [];
        private 
$_rows = [];
        private 
$_rowClasses = [];        
        
        function 
__construct($className=NULL,$attr=NULL){
            
$this->_tableClassName $className;
            
$this->_tableAttr $attr;
        }
        
        
/*
            @param string nombre de una clase css
            @param array de nombres de los campos
            @param array asociativo de atributos cualesquiera
        */
        
public function setHead($className="", array $cols,array $th_attr = []){
            
$this->_headClassName $className;
            
$this->_cols     $cols;        
            
$this->_thAttr    $th_attr;        
        }    
        
        
/*
            Nota: puede usarse solo antes de usar addRow
        */
        
public function setRows(array $rows){            
            
$this->_rows $rows;
        }
                
        public function 
addRow($row){
            
$this->_rows[] = $row;    
        }    
        
        
/*
            Nota: puede usarse solo antes de usar addRowClass
        */
        
public function setRowClases($clases){
            
$this->_rowClasses $clases;
        }    
        
        
/*
            Agrega clase CSS para cada TR
        */
        
public function addRowClass($name){
            
$this->_rowClasses[] = $name;
        }    
            
            
        public function 
renderHTML()
        {            
            
$table_attr $this->getAttribList($this->_tableAttr);
            
$head "<table class=\"$this->_tableClassName\" $table_attr>\n<thead class=\"th_blue\">\n <tr>";        
                  
            foreach (
$this->_cols as $col)
            {                
                
$th_attr = (isset($this->_thAttr[$col])) ? $this->_thAttr[$col] : '';                        
                
$head .= "<th $th_attr>$col</th>\n";
            }    
                
            
$head .= "</tr>\n</thead>\n";                
            
$body '<tbody>';        
            
            
$clases count($this->_rowClasses);
            
$table_class '';
            
$i=0;
            
            foreach (
$this->_rows as $row
            {
                if (
$clases!=0){                
                    
$m=$i%$clases
                    
$i++;     
                    
$table_class $this->_rowClasses[$m];
                }
                
                
$id   = isset($row['id']) ? 'id="'.$row['id'].'"' '';    
                
$tr_attr = (isset($row['attr'])) ? $this->getAttribList($row['attr']) : '';                                 
                
$body .="<tr $id class=\"$table_class\" $tr_attr>";
                
                foreach (
$this->_cols as $col){                                    
                    
$body .="<td>$row[$col]</td>\n";                         
                }         
                
                
$body .="</tr>";
            }            
            
$body .= '</tbody></table>';
                
            return 
$head.$body;        
        }
        
        public function 
__toString(){
            return 
$this->renderHTML();
        }

        private function 
getAttribList($var)
        {
            
$attr_list '';
            if (
is_array($var))
                    foreach (
$var as $key => $at)    
                        
$attr_list.= "$key=\"$at\" ";
                else                    
                    
$attr_list = isset($var) ? $var '';     
                
            return 
$attr_list;    
        }    
        
    } 

Genera una tabla responsiva si se le setean las clases css de Bootstrap por ejemplo, eso si no le pidan mucho la hice en una horita o menos.

Ejemplo completo:

Código PHP:
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        
        
        <style>
            .th_blue { background-color: #4a89dc; color:eee; }
        </style>
    </head>

<body>    
<div class="container">
  <h2>Tabla de prueba</h2>
  
  <div class="table-responsive"> 
    <?php  
        require_once
("HtmlTable.php");
    
        $tabla 
= new HtmlTable('table');
        $tabla->setHead('th_blue',['nombre','apellido','edad']);        
        $tabla
->setRows([['nombre'=>'Jose','apellido'=>'Antonio','edad'=>25],
                         ['nombre'=>'Maria','apellido'=>'Gomez','edad'=>23],
                         ['nombre'=>'Esteban','apellido'=>'Cerutti','edad'=>38]                                                    
                        
]);
        $tabla->addRow(     ['nombre'=>'Pepito','apellido'=>'Ferandez','edad'=>21]);            
                        
        
// opcional
        $tabla->setRowClases(['info','','warning']);        
        
        echo $tabla
->renderHTML();
    ?>
  </div>
</div>

</body>
</html> 

Tanto en addRow() como setRows() es posible pasar dentro del arreglo asociativo un campo "id" el cual de estar presente hará que esa row tenga un id

Ejemplo:

Código PHP:
$tabla->addRow(     ['nombre'=>'Pepito','apellido'=>'Ferandez','edad'=>21,'id'=>45]); 

Renderiza en

Código:
<tr id="45" class="table info">
    <td>Pepito</td>
    <td>Ferandez</td>
    <td>21</td>
</tr>

PD: en la versión actual es posible setear atributos arbitrarios tanto al TABLE, como a los TH y los TR, por ejemplo:

Código PHP:
$tabla = new HtmlTable('table' ,'style="display:none;"'); 

Código PHP:
$tabla->setHead('th_blue',['nombre','apellido','edad',''] ,['nombre'=>'style="display:none;"','apellido'=>NULL,'edad'=>NULL,''=>NULL] ); 

Código PHP:
$tabla->addRow(['nombre'=>'Patricio','apellido'=>'Pascual','edad'=>50,'id'=>2''=>NULL,  'attr'=>['data-algo'=>'algun valor'] ]); 
 
Reply
#2
Muy bien pero me parece un poco "anacrónico" ya que las tablas HTML hoy se generan directamente con JavaScript lo cual las hace mas utiles para trabajar con Ajax
 
Reply
#3
Esta muy bien @Dev
 
Reply
#4
Cierto @ernesto88 fui consciente no es la mejor forma de hacer esto HOY pero en algunos casos puede servir, bueno aclarar que se pueden meter botones por ejemplo facilmente:



Simplemente agregamos un elemeto mas al array que le pasamos a addRow o setRow y hacemos lo mismo con setHead()

Código PHP:
$tabla->setHead('th_blue',['nombre','apellido','edad','']);

$tabla->addRow    ['nombre'=>'Pepito','apellido'=>'Ferandez','edad'=>21,'id'=>45,''=>'<a data-id="row-45" href="javascript:editRow(45);" class="btn btn-md btn-success">editar</a> <a href="javascript:removeRow(45);" class="btn btn-default btn-md" style="background-color: #c83a2a;border-color: #b33426; color: #ffffff;">borrar</a>']);     

Notar he agregado un '' puesto que no quiero se vea una fila con un nombre como 'botones' sino prefiero no tenga nombre.

He agregado la posibilidad de setear "propiedades" entre las cuales podria haber "handlers" de eventos como onClick, para esto una simple modificación:

Código PHP:
$attr = isset($row['attr']) ? $row['attr'] : '';     // agregada
$body .="<tr $id class=\" $table_class\" $attr>";  // cambiada 

Aunque finalmente he hecho así (aunque modularizando)

Código PHP:
// ...
                
$attr '';
                if (isset(
$row['attr']))
                {            
                    if (
is_array($row['attr']))
                        foreach (
$row['attr'] as $key => $at)    
                            
$attr.= "$key=\"$at\" ";
                    else                    
                        
$attr = isset($row['attr']) ? $row['attr'] : '';         
                }
                
                
$body .="<tr $id class=\"$table_class\" $attr>";
                                
// ... 

Ejemplo de uso:

Código PHP:
$tabla->addRow( ['nombre'=>'Patricio''apellido'=>'Pascual','edad'=>50,'id'=>2''=>NULL,  'attr'=>['rowspan'=>2'data-algo'=>'algun valor'] ]); 
 
Reply
#5
(02-25-2017, 11:51 PM)ernesto88 escribió: Muy bien pero me parece un poco "anacrónico" ya que las tablas HTML hoy se generan directamente con JavaScript lo cual las hace mas utiles para trabajar con Ajax
  
¿Cuál sería la utilidad que obtienes al generarlas con JS en vez de esta manera? Una vez generadas, ¿Ajax no las trabajaría de la misma manera se hayan generado de una u otra forma?
[Imagen: 1489128820_fbsnVWR5Pg5WrzX.png]
 
Reply
#6
Muy cierto Josantonius es practicamente lo mismo, quizas la ventaja de manejarlo con JS directamente es no tener un componente en PHP que renderiza la tabla primero y por aparte otro en Javascript que tambien modifica el DOM agregando o quitando "columnas" o sea... seria mas simple si desde el backEnd se envia un JSON y JS se encarga de renderizar.
 
Reply
  


Salto de foro:


Browsing: 1 invitado(s)