When I add footer to my table this error occurs I don't know why ?

Harsha2805

Im new to the datatables. So please help me throught this.

When I add footer to my table a error message comes up like:
jquery.min.js:2 Uncaught TypeError: Cannot read properties of null (reading 'nodeName')
at jquery.dataTables.min.js:141:157
at ub (jquery.dataTables.min.js:127:403)
at Ac (jquery.dataTables.min.js:140:148)
at C.<anonymous> (jquery.dataTables.min.js:142:20)
at C.iterator (jquery.dataTables.min.js:117:304)
at C.<anonymous> (jquery.dataTables.min.js:141:490)
at C.columns (jquery.dataTables.min.js:120:201)
at C.<anonymous> (jquery.dataTables.min.js:145:481)
at C.column (jquery.dataTables.min.js:120:201)
at C.<anonymous> (dataTables.responsive.min.js:37:492)

The Debug code link is given below: https://debug.datatables.net/utiziw

Harsha2805

This the code I use

@extends('layouts.contractor-dashboard')

@section('content')

    <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
        data-sidebar-position="fixed" data-header-position="fixed">
        @include('contractor-dashboard.includes.sidebar')
        <div class="body-wrapper">
            @include('contractor-dashboard.includes.header')
            <!-- Main Content Area -->
            <div class="container-fluid">
                <!-- Your main content goes here -->
                <a href="#" class="back-button" onclick="goBack()">
                    <i class="arrow-icon fas fa-arrow-left"></i>
                </a>
                <!-- Start of table-->
                <table id="quoteTable" class="display">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Stage</th>
                            <th>Item Name</th>
                            <th>Item Description</th>
                            <th>No Of Skilled Labours</th>
                            <th>No Of Un-Skilled Labours</th>
                            <th>Machineries</th>
                            <th>Quantity</th>
                            <th>Unit</th>
                            <th>Estimated Price</th>
                            <th>Estimated Amount</th>
                            <th>Item Type</th>
                            <th>Rate Offered</th>
                            <th>Rate Variation %</th>
                            <th>Amount</th>
                            <th>Days</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- DataTable content will be loaded here -->
                    </tbody>
                    <tfoot class="tfoot">
                        <tr>
                            <th colspan="15" style="text-align:right">Total:</th>
                        </tr>
                    </tfoot>
                </table>
                <!-- End of table-->
            </div>
            <!-- End Main Content Area -->
            @include('contractor-dashboard.includes.footer')
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#quoteTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: "{{ route('quoteViewTable', ['id' => $id]) }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'stage',
                        name: 'stage'
                    },
                    {
                        data: 'itemname',
                        name: 'item_name'
                    },
                    {
                        data: 'item_description',
                        name: 'item_description'
                    },
                    {
                        data: 'No_Of_Skilled_Labours',
                        name: 'no_of_skilled_labours'
                    },
                    {
                        data: 'No_Of_Unskilled_Labours',
                        name: 'no_of_unskilled_labours'
                    },
                    {
                        data: 'machineries',
                        name: 'machineries'
                    },
                    {
                        data: 'qty',
                        name: 'quantity'
                    },
                    {
                        data: 'unit',
                        name: 'unit'
                    },
                    {
                        data: 'estimated_price',
                        name: 'estimated_price'
                    },
                    {
                        data: 'estimated_amount',
                        name: 'estimated_amount'
                    },
                    {
                        data: 'Item_type',
                        name: 'item_type'
                    },
                    {
                        data: 'rate_offered',
                        name: 'rate_offered'
                    },
                    {
                        data: 'rate_variation_percent',
                        name: 'Rate Variation %'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'days',
                        name: 'days'
                    },
                ],
                footerCallback: function(row, data, start, end, display) {
                    var api = this.api();

                    // Remove the formatting to get the integer data for summation
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i :
                            0;
                    };

                    // Total amount calculation
                    var totalAmount = api.column(14, {
                        search: 'applied'
                    }).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b || 0);
                    }, 0);

                    // Set the value to the footer
                    $(api.column(14).footer()).html(totalAmount.toFixed(2));
                },
            });
        });

        function goBack() {
            window.history.back();
        }
    </script>
@endsection

and these are the scripts i load

   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">

    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">

    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <script src="{{ asset('/dashboard_assets/libs/jquery/dist/jquery.min.js') }}"></script>

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js">
    </script>

    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

kthorngren

Datatables requires the number of tfoot th elements match the number in the header. You have 16 header columns but you have colspan="15" for the footer. Try colspan="16".

Kevin

kthorngren

Or, if you don't want the total in the last column add a -tag th` like this:

                    <tfoot class="tfoot">
                        <tr>
                            <th colspan="15" style="text-align:right">Total:</th>
                            <th></th>
                        </tr>
                    </tfoot>

Kevin

Harsha2805

I tried the suggested code. Now the table displays the data, but I can't see the footer. When I tried inspect, I can see tfoot in the html code, but the footer is not being displayed.

I gave colspan as 15, thinking that the columns start form the index 0.

The footer is being displayed when I give the
<tfoot class="tfoot">
<tr>
<th colspan="10" style="text-align:right">Total:</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
but I need them in the last. Should I need to turn off my responsiveness to display the footer or is there any other way?

Mostly I working on this table for mobile view so the table need to be responsive. In the responsive view I can able to see the footer.

Harsha2805

And I have an other issuse like my cells styles are not appearing in the responsive mode.

allan

I gave colspan as 15, thinking that the columns start form the index 0.

Not in HTML. Javascript, yes.

If it isn't displaying for you with the above, please link to a test case showing the issue so I can debug it.

Allan

kthorngren

I built a simple test case using your HTML table. Responsive does hide all of the th in a colspan if one or more of them are to be hidden by Responsive, for example:
https://live.datatables.net/piviciri/1/edit

Note that I add the classname all to the last two columns to make sure they always display. I assume you want the total column to always display. See this example and this doc for more details.

@allan will need to comment regarding the use of colspan and Responsive.

You can create the footer without colspan, ie individual th, to work with Responsive, like this:
https://live.datatables.net/ravibiqe/1/edit

And I have an other issuse like my cells styles are not appearing in the responsive mode.

The selectors you are using might not find the elements when displayed in the child rows. See the Details Views docs and the responsive.details.renderer docs. In the second test case I added classname green and, in the CSS tab, created a simple style to apply to the responsive li. You might need to do something similar. If you need help with this then please update the test case to show what you currently have so we can offer more complete suggestions.

Kevin

allan

@allan will need to comment regarding the use of colspan and Responsive

I don't think it works yet actually. It will with the next major update to Responsive which should drop in January along with DataTables 2.

For now, use individual cells.

Allan

Harsha2805

Thanks a lot for your responses. It worked. Next, I need to study something on styling the child row.