DataTables only work on first table

Domenico1616

Hi, I've a problem with my tables, seems that only the first table works.
Here is the debug: https://debug.datatables.net/esopon
How can I make the other tables works?
I used this js code, I have 4 tables and their class is set to "display", but only the first one works fine
()$(document).ready(function() { ()
()$('table').DataTable( { ()
()dom: 'Bfrtip',()
()buttons: [()
()'copy', 'csv', 'excel', 'pdf', 'print'()
()]()
()} );()

kthorngren

Possibly you are getting a Javascript error. Do you see errors in your browsers's console?

Here is a working example.
https://datatables.net/examples/basic_init/multiple_tables.html

Kevin

Domenico1616

I followed the linked tutorial, HTML and Javascript seems ok. Im getting those errors from the console:

jquery-3.3.1.min.js:2 jQuery.Deferred exception: Cannot set property 'nTf' of undefined TypeError: Cannot set property 'nTf' of undefined
at pb (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:67:319)
at ja (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:89:1)
at e (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:133:112)
at HTMLTableElement.<anonymous> (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:133:198)
at Function.each (https://code.jquery.com/jquery-3.3.1.min.js:2:2573)
at w.fn.init.each (https://code.jquery.com/jquery-3.3.1.min.js:2:1240)
at w.fn.init.q [as dataTable] (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:123:388)
at w.fn.init.f.fn.DataTable (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:206:488)
at HTMLDocument.<anonymous> (http://192.168.1.21:3333/Dashboard.php:102:16)
at l (https://code.jquery.com/jquery-3.3.1.min.js:2:29375) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2 jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:130:363)
at Function.each (https://code.jquery.com/jquery-3.3.1.min.js:2:2573)
at w.fn.init.each (https://code.jquery.com/jquery-3.3.1.min.js:2:1240)
at HTMLTableElement.<anonymous> (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:130:318)
at Function.each (https://code.jquery.com/jquery-3.3.1.min.js:2:2573)
at w.fn.init.each (https://code.jquery.com/jquery-3.3.1.min.js:2:1240)
at w.fn.init.q [as dataTable] (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:123:388)
at w.fn.init.f.fn.DataTable (https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sl-1.3.1/datatables.min.js:206:488)
at HTMLDocument.<anonymous> (http://192.168.1.21:3333/Dashboard.php:122:19)
at l (https://code.jquery.com/jquery-3.3.1.min.js:2:29375) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
fontawesome-webfont.woff2:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot set property 'nTf' of undefined
at pb (datatables.min.js:67)
at ja (datatables.min.js:89)
at e (datatables.min.js:133)
at HTMLTableElement.<anonymous> (datatables.min.js:133)
at Function.each (jquery-3.3.1.min.js:2)
at w.fn.init.each (jquery-3.3.1.min.js:2)
at w.fn.init.q [as dataTable] (datatables.min.js:123)
at w.fn.init.f.fn.DataTable (datatables.min.js:206)
at HTMLDocument.<anonymous> (Dashboard.php:102)
at l (jquery-3.3.1.min.js:2)
jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (datatables.min.js:130)
at Function.each (jquery-3.3.1.min.js:2)
at w.fn.init.each (jquery-3.3.1.min.js:2)
at HTMLTableElement.<anonymous> (datatables.min.js:130)
at Function.each (jquery-3.3.1.min.js:2)
at w.fn.init.each (jquery-3.3.1.min.js:2)
at w.fn.init.q [as dataTable] (datatables.min.js:123)
at w.fn.init.f.fn.DataTable (datatables.min.js:206)
at HTMLDocument.<anonymous> (Dashboard.php:122)
at l (jquery-3.3.1.min.js:2)
fontawesome-webfont.woff:1 Failed to load resource: the server responded with a status of 404 (Not Found)

The problem could be here?

kthorngren

Cannot set property 'nTf' of undefined

There are many threads with this error, such as this:
https://datatables.net/forums/discussion/comment/136810/#Comment_136810

Without seeing your page it will be hard to say what the problem might be. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Domenico1616

This is the address of the page http://79.6.121.196:3333/index.php
Username and pw are "Admin". You can switch between tables whith the menu on the left.
Is possible that there is a HTML problem between the tables that works and the table that does not works?

kthorngren

Looks like you need to validate your HTML. Your table rows are built with valid HTML.

                <table id="table_id" class="display" >
            <!--<caption class="title">Made by Kataclima</caption>-->
                <thead>
                <tr>
                <th>Tipo</th>
                <th>Descrizione</th>
                <th>Scadenza</th>
                <th>Società</th>                
                </thead>
                <tbody>
                                
                    <td>Raccomandazione</td>
                    <td>Le attività sono attualmente in fase di definizione; è stato fissato un obiettivo specifico collegato alla formazione.</td>
                    <td><nobr>18/10/2019</nobr></td>
                    <td>Cobat</td>

                    </tr>                   

You don't have an opening <tr> although you have the closing </tr>.

You can use the W3C Validation tool to validate your page.

Kevin

Domenico1616

I changed the html and the table is now ok, there are other html errors not relevant (like a notice between a comment), can they cause problem?
What are things that I should be careful about? The table is generated trought a php script.

kthorngren

Here is the doc regarding the HTML requirements:
https://datatables.net/manual/installation#HTML

Kevin

Domenico1616

Solved, it was because the numbers of columns in table header < than numbers of columns in the table. Thx for the support