Header Ads Widget

Ticker

6/recent/ticker-posts

Introducción al complemento jQuery DataTables

 El complemento de tabla de datos de Jquery es básicamente una biblioteca de JavaScript. Es un complemento jquery muy útil para crear listas de tablas html. Este complemento tiene muchas funciones de forma predeterminada, como la búsqueda, la clasificación y la paginación.

Este tutorial trata sobre  el uso básico del complemento jquery datatables .

Hay muchos otros complementos de tabla de datos que le permiten exportar la tabla de datos a csv, pdf o excel.  

En este ejemplo, aprenderemos el uso básico del complemento jquery datatables y también veremos el ejemplo de jQuery datatable .

tes de la etiqueta de cierre del encabezado.

        <! - DataTable CSS ->
        <link href = " https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css " rel = "stylesheet" type = "text / css" />

        <! - jQuery ->
        <script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "> </script>

        <! - DataTable JS ->
        <script type = "text / javascript" src = " https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js "> </script> 

Paso 2.  Crea una tabla HTML

            <table id = "pclu">
                <thead>
                    <tr><th>Sl</th><th>Tema</th> </tr>
                </thead>

                <tbody>
                    <tr> <td> 1 </td> <td>PHP</td> </tr>
                    <tr> <td> 2 </td> <td>MySQL</td> </tr>
                    <tr> <td> 3 </td> <td>JavaScript</td> </tr>
                    <tr> <td> 4 </td> <td>jQuery</td> </tr>
                    <tr> <td> 5 </td> <td>AJAX</td> </tr>
                </tbody>
            </table> 

Paso 3.  Agregue la funcionalidad de tablas de datos en la tabla anterior

 <script>
            $ (documento) .ready (function () {
                $ ("# pclu"). dataTable ();
            });
  </script>

Fragmento completo:

<! DOCTYPE html>
<! -
Sitio web: http://www.phpcluster.com
Autor: Vikash Kumar Singh
Tutorial: Ejemplo básico de jQuery DataTable
->
<html>
    <cabeza>
        <title> Ejemplo de jQuery DataTable </title>
        <meta charset = "UTF-8">
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
        <! - DataTable CSS ->
        <link href = " https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css " rel = "stylesheet" type = "text / css" />
        <! - jQuery ->
        <script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "> </script>
        <! - DataTable JS ->
        <script type = "text / javascript" src = " https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js "> </script>
        <script>
            $ (documento) .ready (function () {
                $ ("# pclu"). dataTable ();
            });
        </script>

    </head>
    <cuerpo>
        <div>
            <h1> Ejemplo de jQuery DataTable </h1>

            <table id = "pclu">
                <thead>
                    <tr><th>Sl</th><th>Tema</th> </tr>
                </thead>

                <tbody>
                    <tr> <td> 1 </td> <td>PHP</td> </tr>
                    <tr> <td> 2 </td> <td>MySQL</td> </tr>
                    <tr> <td> 3 </td> <td>JavaScript</td> </tr>
                    <tr> <td> 4 </td> <td>jQuery</td> </tr>
                    <tr> <td> 5 </td> <td>AJAX</td> </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Demo en vivo

Publicar un comentario

0 Comentarios