javascript contenido

jquery datatable

Les traigo un ejemplo práctico de una tabla en DataTable en jquery.

<html lang=»en»>
<head>
    <meta charset=»UTF-8″>
    <meta http-equiv=»X-UA-Compatible» content=»IE=edge»>
    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
    <title>Document</title>
    <link href=»https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css» rel=»stylesheet» type=»text/css»>
    <script src=»https://code.jquery.com/jquery-3.6.1.js» integrity=»sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=» crossorigin=»anonymous»></script>
    <script src=»https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js» ></script>
   
</head>
<body>
<table id=»table_id» class=»display»>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>mail</th>
            <th>fecha</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Toni</td>
            <td>toni@toni.com</td>
            <td>5-5-2005</td>
            <td><button onclick=»»>Editar</button></td>
        </tr>
        <tr>
            <td>Eva</td>
            <td>eva@eva.eva</td>
            <td>5-5-2005</td>
            <td><button onclick=»»>Editar</button></td>
        </tr>
        <tr>
            <td>Pepe</td>
            <td>pepe@pepe.com</td>
            <td>6-02-1966</td>
            <td><button onclick=»»>Editar</button></td>
        </tr>
        <tr>
            <td>Jessica</td>
            <td>jes@jes.jes</td>
            <td>5-01-2015</td>
            <td><button onclick=»»>Editar</button></td>
        </tr>
        <tr>
            <td>Josep</td>
            <td>josep@josep.jos</td>
            <td>15-08-2005</td>
            <td><button onclick=»»>Editar</button></td>
        </tr>
    </tbody>
</table>
<script>
$(document).ready( function () {
    $(‘#table_id’).DataTable();
} );

 

</script>

 

</body>
</html>

Deja un comentario