Solicitud de soporte con código de depuración

charly77

Solicito ayuda, pues tengo el código de depuración: ogexos
Tengo una página en mi web con seis tablas que lleno con una bbdd de mysql.
Las tengo con Datatables, pero solo me añade las ayudas a la navegación a dos de ellas.
He intentado dos maneras de hacerlo, mediante el id y con la clase display, pero parecen funcionar igual:

new DataTable('table.display',{
        language:{
            url:'//cdn.datatables.net/plug-ins/2.0.2/i18n/es-ES.json',
        },
    });

let elementos=document.getElementsByTagName("table");
    for(let index=0;index<elementos.length;index++){
        let element=elementos[index];
        new DataTable('#'+element.id,{
            retrieve:true,language:{
                url:'//cdn.datatables.net/plug-ins/2.0.2/i18n/es-ES.json',
            },
        });
    }

Es la primera vez que uso Datatables y no lo controlo demasiado bien.
Gracias por adelantado.

kthorngren

I have a page on my website with six tables that I populate with a mysql dbdd.
I have them with Datatables, but it only adds the navigation aids to two of them.
I have tried two ways to do it, using the id and with the display class, but they seem to work the same:

Do all of the table tags have the display class?

Make sure to initialize the Datatables after all the HTML tables are built. Do you have the initialization in document.ready()?

Do you get errors in the browser's console?

To help debug we will need to see a test case replicating the issue. Please post a link to your page or build a running test case showing the problem.
https://www.datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

charly77

Lo tengo aquí:
https://live.datatables.net/petalomu/1/edit?html,output
Sí, las seis tablas tienen la clase display.
En la consola me aparece esto:

"datatables.js:3264 Uncaught TypeError: Cannot read properties of undefined (reading 'cell')
at _fnHeaderLayout (datatables.js:3264:61)
at _fnDrawHead (datatables.js:3310:16)
at _fnInitialise (datatables.js:4636:3)
at Object.success (datatables.js:333:7)
at fire (jquery-3.7.1.js:3223:31)
at Object.fireWith [as resolveWith] (jquery-3.7.1.js:3353:7)
at done (jquery-3.7.1.js:9627:14)
at XMLHttpRequest.<anonymous> (jquery-3.7.1.js:9888:9)"

kthorngren

You have invalid HTML. Take for example the second table. You have this:

                        <thead>
                            <tr>
                                <th>Título</th>
                                <th>Total vendido</th>
                                <th>Cantidad total</th>
                            <tr>
                        </thead>

Which results in an extra, blank header row. Inspecting the table shows this result:

<thead>
                            <tr>
                                <th>Título</th>
                                <th>Total vendido</th>
                                <th>Cantidad total</th>
                            </tr><tr>
                        </tr></thead>

In line 6 you need to have </tr> not <tr>. I updated your test case to remove the Datatables initialization. Inspect the header of the second row to see the two header rows being built:
https://live.datatables.net/woyeqevo/1

Kevin

charly77

Muchas gracias Kevin.
Tenías razón, en cuatro tablas había escrito mal la etiqueta de cierre </tr>.