I have added a new row at the top of my headings that has row and column spans - data not displaying

Glyndwr

Hi,

I have added a new row to my table with rowspan and colspan and the data will no longer display.

This works:

<table class="table table-hover table-bordered" id="statisticsTable">
    <thead>    
    <tr>
        <th>Councils</th>
        <th>Districts</th>
        <th>Groups</th>
        <th>Sections</th>
        <th>Leaders</th>
        <th>Non Leaders</th>
        <th>Youth Members</th>
        <th>Leaders</th>
        <th>Youth</th>
    </tr>
    </thead>
    <tbody id="statisticsTablebody">
    </tbody>
</table>

This does not work:

<table class="table table-hover table-bordered" id="statisticsTable">
    <thead> 
    <tr>
        <th rowspan="2">Council</th>
        <th colspan="3">Count of Units</th>
        <th colspan="3">Count of Accounts</th>
        <th colspan="2">Count of Members<th>
    </tr>   
    <tr>
        <th>Districts</th>
        <th>Groups</th>
        <th>Sections</th>
        <th>Leaders</th>
        <th>Non Leaders</th>
        <th>Youth Members</th>
        <th>Leaders</th>
        <th>Youth</th>
    </tr>
    </thead>
    <tbody id="statisticsTablebody">
    </tbody>
</table>

This is the function I use to fill it:

function showDataTable() {
    //Show DataTable
    if ( $.fn.dataTable.isDataTable( '#statisticsTable' ) ) {
        var statisticsTable = $('#statisticsTable').DataTable();
    }
    else {
        var statisticsTable = $('#statisticsTable').DataTable( {
            "info":     false,
            "fixedHeader" : true,
            "scrollY":        "500px",
            "scrollCollapse": true,
            "paging":         false,
            "pageLength": 30,
            dom: 'Bfrtip',
            buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
            columns: [
                  {data: 'council',
                      defaultContent: ""},
                  {data: 'districtTotal',
                      defaultContent: ""},
                  {data: 'groupTotal',
                      defaultContent: ""},
                  {data: 'sectionTotal',
                      defaultContent: ""},
                  {data: 'leaderTotal',
                      defaultContent: ""},
                  {data: 'nonLeaderTotal',
                      defaultContent: ""},
                  {data: 'youthMemberTotal',
                      defaultContent: ""},
                  {data: 'memberLeaderTotal',
                      defaultContent: ""},
                  {data: 'memberYouthTotal',
                      defaultContent: ""},
                 ],
        });
    }

    //Get Cub award summary details
    $.ajax({
        url : 'StatisticsView', // Your Servlet mapping or JSP(not suggested)
        data : {
            ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
            ssAccountID : sessionStorage.getItem('ssAccountID'),
        },
        type : 'POST',
    })
    .fail (function(jqXHR, textStatus, errorThrown) {
//      alert(jqXHR.responseText);
        if(jqXHR.responseText.includes('No Cub award summary details')){
            $('#ajaxGetUserServletResponse').text('No Statistics.');
        }else{
            $('#ajaxGetUserServletResponse').text('Error getting Statistics.');
        }
        statisticsTable.clear().draw();
    })
    .done(function(responseJson1a){
        // JSON response to populate the Statistics table
        dataType: "json";

//      alert(JSON.stringify(responseJson1a));
        statisticsTable.clear();
        statisticsTable.rows.add(responseJson1a).draw();
    })
}

allan

You'll need to give me a link to a page showing the issue so I can look into it fully please. I don't immediately see what is wrong from the above.

Allan

Glyndwr

Hi Allan,

This is running locally on my desktop so I can not provide a link to that. This is the code: https://live.datatables.net/gipoyiva/1/edit?html,css,js,console,output

allan

Thank you. Your example gives an error about tooltip not being defined, but if I comment that out, I see an error about a column being undefined. Your Javascript defines 9 columns. The HTML defines 10 (if </tr>>Salary</th> is corrected).

That discrepancy is what is causing the issue. One of them is wrong and needs to be corrected. I would guess the Javascript since there is no salary data mentioned.

Allan

Glyndwr

Hi Allen,

Sorry I did not mean to have the row "</tr>>Salary</th>". That is not part of the code I am testing. I have been trying several things and find that the ajax code to get the data is not being performed. So the error is before this and must be in the if else code.

I also realise that I forgot to include the console error, my apologies for that:

Uncaught TypeError: Cannot read properties of undefined (reading 'sClass')
at et (dataTables.min.js:4:14335)
at At (dataTables.min.js:4:29799)
at wt (dataTables.min.js:4:22970)
at Mt (dataTables.min.js:4:34080)
at HTMLTableElement.<anonymous> (dataTables.min.js:4:7044)
at Function.each (jquery.min.js:2:3129)
at ce.fn.init.each (jquery.min.js:2:1594)
at ce.fn.init.V [as dataTable] (dataTables.min.js:4:1327)
at H.fn.DataTable (dataTables.min.js:4:93308)
at showDataTable (statistics.js:25:47)Understand this error

Kind regards,

Glyn

allan

https://live.datatables.net/gipoyiva/5/edit

That is your example with the two changes I mentioned. As you will see the table initialises as expected - it can't load data since the Ajax route isn't available, but it does load.

If you are still having problems, please update your test case, or link to another that shows the issue so I can help to resolve it.

Allan