De acuerdo con la documentación oficial: DataTables es un plugin para jQuery. Es una herramienta muy flexible, basada en el principio de mejoras progresivas, que además añade controles avanzados de interacción sobre cualquier tabla HTML. En esta primera parte aprenderán como usar una DataTable por lo que necesitarán tener la librería jQuery en su proyecto para que puedan funcionar.
¿Por qué usar una DataTable?
Como veremos a continuación, una DataTable te permite:
  • Realizar una búsqueda de información
  • Crear una paginación de tu tabla
  • Cambiar el idioma de las opciones
  • Filtrar la búsqueda por criterios definidos
  • Posee temas para Bootstrap, Material Design, Foundation, Semantic
  • Renderizar la información directamente desde el Servidor mediante AJAX
  • Muchas más opciones aún
A continuación un ejemplo básico en un documento HTML
[html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTable Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="well">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">
                        <table id="mi-tabla" class="table table-striped">
                            <thead>
                            <tr>
                                <th>Framework</th>
                                <th>Lenguaje</th>
                                <th>Tipo</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Laravel</td>
                                <td>PHP</td>
                                <td>Backend</td>
                            </tr>
                            <tr>
                                <td>React</td>
                                <td>JavaScript</td>
                                <td>Frontend</td>
                            </tr>
                            <tr>
                                <td>Ruby on Rails</td>
                                <td>Ruby</td>
                                <td>Backend</td>
                            </tr>
                            <tr>
                                <td>Django</td>
                                <td>Python</td>
                                <td>Backend</td>
                            </tr>
                            <tr>
                                <td>Spring</td>
                                <td>Java</td>
                                <td>Backend</td>
                            </tr>
                            <tr>
                                <td>Vue</td>
                                <td>JavaScript</td>
                                <td>Frontend</td>
                            </tr>
                            <tr>
                                <td>Express</td>
                                <td>JavaScript</td>
                                <td>Backend</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script>
    $('#mi-tabla').DataTable();
</script>
</body>
</html>
[/html]
Archivos requeridos para funcionar:
  • Bootstrap CSS
  • jQuery JS
  • jQuery Datatables (Este archivo sirve para habilitar las opciones)
  • Datatables Bootstrap (Este archivo sirve para que la viste se renderice correctamente)
Sitio oficial y descarga de archivos: https://datatables.net/
Les adjunto los archivos y la configuración que he utilizado en el siguiente repositorio de GItHub: https://github.com/eichgi/datatables, el repositorio se irá actualizando con mas ejemplos a medida que vayamos avanzando. Si tienes alguna sugerencia o aclaración por favor no dudes en hacérmelo saber en los comentarios.
Tags:

Leave a Reply