Datatables column sorting/ordering on table columns nested within another table-CodePudding

I'm trying to add alphanumeric sorting/ordering to the columns of the child datatables.

EDIT I've updated the HTML portion after fixing some formatting issues. I am now getting this error:

Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')

I've been researching different causes of this error and often it seems it's caused by a mismatch of column headers and columns. If my tables are malformed I can't tell (I'm also somewhat novice with frontend/JS code)

table of tables

<table  id="scrollTable" role="grid">

        <caption>Cart Status</caption>
        <thead>
        <tr>
            <th>Filling</th>
            <th>Full</th>
            <th>In Use</th>
            <th>Empty</th>
        </tr>
        </thead>
        <tbody>
            <tr role="row" ><td >
                <table id="fillingTable" >
                    <thead>
                    <tr>
                        <th>Sort1</th>
                        <th>Sort2</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <a style="color: red;" href="#" onclick="getConfirmation('11518','W113PC2')">W113PC2</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table id="fullTable" >
                    <thead>
                <tr>
                    <th>Sort1</th>
                    <th>Sort2</th>
                </tr>
                </thead>
                    <tbody>
                        <tr>
                            <td>
                                <span style="color: red; font-weight: bold; ">W321DC1</span>
                            </td>
                            <td>
                                <span style="color: green; font-weight: bold;">W543DC1</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span style="color: green; font-weight: bold;">W678DC1</span>
                            </td>
                            <td>
                                <span style="color: red; font-weight: bold;">W405PC1</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span style="color: green; font-weight: bold;">W113DC1</span>
                            </td>
                            <td>
                                <span style="color: green; font-weight: bold;">W405PC5</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
  ... 2 tables excluded
</table>

javascript

 $(document).ready( function() {
           $('table.Dashboard').DataTable({
                paging: false,
                searching: false,
                info: false,
           });

            $('#fillingTable').DataTable({
                paging: false,
                searching: false,
                info: false
            });
            $('#fillingTable tr:last').remove();

            $('#fullTable').DataTable({
                paging: false,
                searching: false,
                info: false
            });
            $('#fullTable tr:last').remove();

            $('#inUseTable').DataTable({
                paging: false,
                searching: false,
                info: false
            });
            $('#inUseTable tr:last').remove();

            $('#emptyTable').DataTable({
                paging: false,
                searching: false,
                info: false
            });
            $('#emptyTable tr:last').remove();

        });

CodePudding user response：

Just so it's not hidden in a Fiddle in a comment, here is the same example I created, but as a Stack Snippet.

The snippet shows one parent DataTable containing 2 nested DataTables. Each of the three tables has different dimensions and is controlled by its own DataTables initialization code.

$(document).ready(function() {

  $('#scrollTable').DataTable({
    paging: false,
    searching: false,
    info: false,
    order: false // I disabled sorting for the parent table
  });

  $('#fillingTable').DataTable({
    paging: false,
    searching: false,
    info: false
  });

  $('#fullTable').DataTable({
    paging: false,
    searching: false,
    info: false
  });


});

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
  </head>

  <body>

    <div style="margin: 20px;">

      <table  id="scrollTable">

        <caption>Cart Status</caption>
        <thead>
          <tr>
            <th>Filling</th>
            <th>Full</th>
            <th>In Use</th>
            <th>Empty</th>
          </tr>
        </thead>
        <tbody>
          <tr>

            <td>
              <table id="fillingTable" >
                <thead>
                  <tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><span style="color:red; font-weight: bold;">W321DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W543DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W678DC1</span></td>
                    <td><span style="color:red; font-weight: bold;">W405PC1</span></td>
                  </tr>
                  <tr>
                    <td><span style="color:red; font-weight: bold;">W221DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W343DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W278DC1</span></td>
                    <td><span style="color:red; font-weight: bold;">W405PC1</span></td>
                  </tr>
                  <tr>
                    <td><span style="color:red; font-weight: bold;">X221DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">Z343DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W278DC1</span></td>
                    <td><span style="color:red; font-weight: bold;">Z405PC1</span></td>
                  </tr>
                </tbody>
              </table>
            </td>

            <td>
              <table id="fullTable" >
                <thead>
                  <tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th>Col 5</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><span style="color:red; font-weight: bold;">W321DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W543DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W678DC1</span></td>
                    <td><span style="color:red; font-weight: bold;">W405PC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W113DC1</span></td>
                  </tr>
                  <tr>
                    <td><span style="color:red; font-weight: bold;">W221DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W343DC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W278DC1</span></td>
                    <td><span style="color:red; font-weight: bold;">W405PC1</span></td>
                    <td><span style="color:green; font-weight: bold;">W813DC1</span></td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td>Whatever</td>
            <td>More whatever</td>
          </tr>
        </tbody>
      </table>

    </div>

  </body>

</html>