tabla HTML con JQuery y CSS

Ordenar una tabla HTML con JQuery y CSS – Sexta Parte

Continuamos con esta serie de art铆culos que componen este tutorial de CodeIgniter 4. En esta ocasi贸n, vamos a dejar un poco de lado la l贸gica de CodeIgniter, para ponerle algo de 芦fina coqueter铆a禄 a nuestra Vista. Por eso, veamos como ordenar聽 una tabla HTML con JQuery y CSS.

Bien, nuestra tabla se ver谩 as铆:

La clave para formatear la tabla en ese estilo, es usar la librer铆a datatables.min.js. Aunque te comparto el link, puedes descargarla tambi茅n de mi blog aqu铆: datatables.zip

Ordenar una tabla HTML con JQuery y CSS


Ahora nuestro 芦head.php禄 tiene esta modificaci贸n:

<html>
<head>
<link rel="stylesheet" href="<?php echo base_url('public/estilos.css'); ?>" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('public/estilo_tabla/datatables.min.css'); ?>" type="text/css">
<script src="<?php echo base_url('public/estilo_tabla/jquery-3.5.1.js'); ?>"></script>
<script src="<?php echo base_url('public/estilo_tabla/datatables.min.js'); ?>"></script>
<script>
    $(document).ready(function() {
    $('#tabla_contactos').DataTable();
    } );
</script>
</head>

Y nuestra Vista tiene esta modificaci贸n:

<table id="tabla_contactos" class="display" style="width:100%">
<thead>
<tr>
   <th><b>NOMBRE</th><th><b>CORREO</th></tr>
</thead>
 <tbody>
<?php

foreach ($result as $row) {
    echo "<tr>";
    echo "<td>".$row['name']."<td>".$row['email'];
}

?>
 </tbody>
</table>
<br><br><br><br>

Y ya est谩. La librer铆a nos permite ordenar directamente los resultados de la consulta en el HMTL, sin necesidad de generar nuevas consultas a la BD para traer datos ordenados. Si el resultado en la tabla es muy extenso, la librer铆a tambi茅n nos permite filtrar algun dato en el HTML.

Bien, eso es todo por ahora. S铆 te ha servido esta serie de art铆culos del tutorial acerca de CodeIgniter 4, valora este contenido.

 

< Quinta Parte


Valora este art铆culo:

Ordenar tabla HTML con JQuery y CSS
5,0 rating based on 12.345 ratings
Overall rating: 5 out of 5 based on 1 reviews.

 

Name
Email
Review Title
Rating
Review Content

 

Muy regio

★★★★★
Est谩 muy bien este tutorial, me ha ayudado muchisimo.
- Ivan Dario Camacho
Comparte esto en
Publicado en Desarrollo Web.