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. el 20 feb. 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
    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
    el 19 mar. 2018 a las 21:02

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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