0

Soy novato Quiero hacer una datatable.

Me he leído la guía inicial: Datatables inicio

Para tener una datatable tengo que tener Javascript / CSS Lo puedo tener por tres formas

  1. Using the DataTables CDN-> que es por internet
  2. Locally-> descargar las librerarias
  3. With a package manager such as NPM or Bower-> No se lo que es

Yo elijo la 1.

Despues necesito el jquery función

$(document).ready( function () {
$('#table_id').DataTable();
} );

Por lo tanto tengo, mi datatable básica seria:

<!DOCTYPE html>
<html>
<head>
<title>Mi primera datatable</title>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

<body>

<table id="table_id" class="display">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    </thead>
     <tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>
   </tbody>
  </table>

  <script>
  $(document).ready( function () {
   $('#table_id').DataTable();
   } );
  </script>

  </body>
  </html>

La guía, me dice algo que tengo que tener algo de jquery, y no se lo que es. Evidentemete, me da error. No me carga la datatable y me sale el error jquery

introducir la descripción de la imagen aquí

Como puedo arreglar ese error y donde me descargo esto del jquery para tener una databale?

Muchas gracias por la ayuda.

1
  • data Table solo me carga en una página al llevarlo a otra no filtra si reconoce que el dato existe o no existe, pero no los filtra más que solo en la página raíz, en el ejemplo también me fije que el filtro no le funciona. Commented el 20 feb. 2023 a las 15:17

2 respuestas 2

3

Te falta una referencia a JQuery para que ejecutes la función Datatable por eso te lanza el error.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Debes poner la referencia antes que las de Datatables.

<!DOCTYPE html>
<html>

<head>
  <title>Mi primera datatable</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

<body>

  <table id="table_id" class="display">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
      </tr>
      <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
      </tr>
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      $('#table_id').DataTable();
    });
  </script>

</body>

</html>

1
  • Muchas gracias!!!
    – Vidal
    Commented el 19 mar. 2018 a las 20:54
2

Parece que te falta incluir la librería de JQuery antes que la del Datatable

$(document).ready(function() {
  $('#table_id').DataTable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />  

<table id="table_id" class="display">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
    </tr>
  </tbody>
</table>

1
  • geniaaal! gracias :)
    – Vidal
    Commented el 19 mar. 2018 a las 21:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.