0

Tengo el siguiente problema estoy haciendo una tabla de filtrado con dataTable y Ajax todo me funciona a la perfección puedo ver los registros y filtrar pero siempre que recargo la pagina me sale un alert con el mensaje:

DataTables warning: table id=alumnos - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"

¿Alguien sabe que podría ser?

Aquí les dejo el código que tengo:

<link rel="stylesheet" href="../css/style_ex.css">
<table id="alumnos" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Apellidos</th>
            <th>Nombres</th>
            <th>CI</th>
            <th>Año</th>
            <th>Sección</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script src="../js/jquery-3.3.1.js"></script> <link rel="stylesheet" href="../css/jquery.dataTables.min.css"> <link rel="" href="../css/fixedHeader.dataTables.min.css"> <script src="../js/datatables.min.js"></script> <script src="../js/search.js"></script>
<script>
    $(document).ready(function() {
        $('#alumnos').DataTable({
            "ajax":{
                "url": "consulta.php",
                "dataSrc":""
            },
            "columns":[
                {"data": "id"},
                {"data": "apellidos"},
                {"data": "nombres"},
                {"data": "cedula"},
                {"data": "grado"},
                {"data": "seccion"}
            ]  
        });
    });
          
    $(document).ready(function(){
        var table = $('#alumnos').DataTable({
           orderCellsTop: true,
           fixedHeader: true 
        });
        //Creamos una fila en el head de la tabla y lo clonamos para cada columna
        $('#alumnos thead tr').clone(true).appendTo( '#alumnos thead' );

        $('#alumnos thead tr:eq(1) th').each( function (i) {
            var title = $(this).text(); //es el nombre de la columna
            $(this).html( '<input type="text" placeholder="Buscar por...'+title+'" />' );
     
            $('input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            });
        });
    });
</script>
1
  • Estas reinicializando la tabla siendo que esta ya ha sido iniciada. En cambio podías iniciarla una vez, recuperarla o destruirla. ->datatables.net/manual/tech-notes/3
    – Excorpion
    Commented el 22 oct. 2020 a las 13:31

1 respuesta 1

1

Alex, esto es porque se está haciendo una doble inicialización. Lo que te recomiendo hacer es poner todas las opciones de customización en la inicializacion:

$(document).ready(function(){
    var table = $('#alumnos').DataTable({
        "ajax":{
            "url": "consulta.php",
            "dataSrc":""
        },
        "columns":[
            {"data": "id"},
            {"data": "apellidos"},
            {"data": "nombres"},
            {"data": "cedula"},
            {"data": "grado"},
            {"data": "seccion"}
        ],  
       orderCellsTop: true,
       fixedHeader: true 
    });

...

1
  • Muchas gracias me funciono a la perfección Commented el 22 oct. 2020 a las 14: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.