Multiple data tables on page, does this work?

oceancoast

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Uncaught TypeError: Cannot read properties of undefined (reading 'mData')
at HTMLTableCellElement.<anonymous> (core.min.js:461:137)
at Function.each (core.min.js:8:2573)
at a.fn.init.each (core.min.js:8:1240)
at HTMLTableElement.<anonymous> (core.min.js:461:90)
at Function.each (core.min.js:8:2573)
at a.fn.init.each (core.min.js:8:1240)
at a.fn.init.u [as dataTable] (core.min.js:454:13)
at k.fn.DataTable (core.min.js:538:292)
at HTMLDocument.<anonymous> (Logi

Description of problem:
I'm trying to use Datatables with multiple tables on a page, each in a different TAB, however only the first table works.. the other doesn't Both tables are defined similar in HTML, just the Table ID is different. Is this just a limitation, or is something special needed to work with multiple tables?

    $(document).ready(function() {


    $('#charters').DataTable({
        "scrollY" : "350px",
        "scrollCollapse" : true,
        "paging" : false
    });

    $('#ledger').DataTable({
        "scrollY" : "350px",
        "scrollCollapse" : true,
        "paging" : false
    });

});

allan

It sure does. Here is a little example of multiple tables with Bootstrap tabs.

We'd need a link to a test case to help diagnose the issue you are having.

Allan

kthorngren

Cannot read properties of undefined (reading 'mData')

Typically this type of error indicates the the number of cells in each row doesn't match the number of columns in the thead. Start with the HTML requirements doc. If this doesn't help then we will need the test case Allan asked for.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

oceancoast

Thank you Allan, however the example shown is for using Ajax and a single data set, rendered in two tables.. but my example is two entirely different Data sets. I load the table using JSP.. not Ajax.

Not sure how to provide the link to the test case.. I'll have to fashion something together since this is on my dev box.

For reference I'm using Datatable 1.10.25
Bootstrap 4.0.0
Jquery 3.3.1

            <!-- Tab panes-->
            <div class="tab-content">
              <div class="tab-pane fade show active" id="tabs-1-1">

                            <div class="table-responsive wow fadeIn">
                                <table id="charters" class="table display">
                                  <thead>
                                    <tr>
                                      <th>Boat</th>
                                      <th>From Date</th>
                                      <th>Thru Date</th>
                                      <th>Status</th>
                                    </tr>
                                  </thead>
                                  <tbody id="tb_charters">

        <%
            Iterator<MemberCharter> i = minf.Charters.listIterator();
            while(i.hasNext()){
                MemberCharter mc = i.next(); %>

                                    <tr>
                                     <td><a href=<%= "'Charter.jsp?CharterID=" + mc.getCharterID()+"'" %>><%=mc.BoatName %></a></td>
                                     <td><%=mc.getCharter().FromDate%></td>
                                     <td><%=mc.getCharter().ThruDate %></td>
                                     <td><%=mc.getCharter().RenderStatus() %></td>
                                    </tr>   
        <%  } %>

                                  </tbody>
                                </table>
                            </div>

            </div>

             <!--  CERTIFICATIONS -->

             <div class="tab-pane fade" id="tabs-1-2">
                    <div class="table-responsive wow fadeIn">
                    <table id="certifications" class="table display">
                      <thead>
                        <tr>
                          <th>Certification</th>
                          <th>Description</th>
                          <th>Date</th>
                          <th>Status</th>
                        </tr>
                      </thead>
                      <tbody id="tb_Certifications">

<% Iterator<Certification> i3 = minf.Certifications.listIterator();
while(i3.hasNext()){
Certification l = i3.next(); %>
<tr>
<td><%=l.CertificationType %></a></td>
<td><%=l.Description %></td>
<td><%=l.getCerificationtDate()%></td>
<td><%=l.Status %></td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>

              <!--  LEDGER --> 

              <div class="tab-pane fade" id="tabs-1-3">

                    <div class="table-responsive wow fadeIn">
                          <table id="ledger" class="table display">
                                  <thead>
                                    <tr>
                                      <th>Date</th>
                                      <th>Type</th>
                                      <th>Description</th>
                                      <th>Quantity</th>
                                      <th>Amount</th>
                                      <th>Balance</th>
                                    </tr>
                                  </thead>

                                  <tbody id="tb_ledger" >

<% Iterator<Ledger> i2 = minf.ledger.listIterator();
while(i2.hasNext()){
Ledger l = i2.next(); %>

                                    <tr>
                                     <td><%=l.getDate() %></a></td>
                                     <td><%=l.renderTransactionType() %></td>
                                     <td><%=l.getDescription()%></td>
                                     <td><%=l.Units %></td>
                                     <td><%=l.Amount %></td>
                                     <td></td>
                                     <td></td>
                                    </tr>   
        <%  } %> 

                                  </tbody> 

                                </table>
                            </div>

              </div>

kthorngren

The second table has 6 header columns but you have 7 in each row. Either remove the extra column in the tbody or add a column to the header.

Kevin

oceancoast

Hey,, good catch.

Yes.. JOY that worked. Thank you Kevin.