colspan 4 for a table is giving this error Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

Question

I have a table where colspan is causing the above error

my table is dynamic it might grow based on data

i'm using below cdn for datatable

//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js

here is demo:https://jsfiddle.net/3mazrcvL/10/

here is my table

<table class="table table-boardered" id="examples">
      <thead>
            <tr>
                 <th>Customer Id</th>
                <th>project_name</th>
                <th>product_name</th>
                <th>quantity</th>
                <th>price</th>
            </tr>
      </thead>
<tbody>



    <tr class="sum">
        <td>9</td>
        <td></td>
        <td>first</td>
        <td>1</td>
        <td>90</td>
   </tr>


    <tr class="sum">
        <td>9</td>
        <td></td>
        <td>first</td>
        <td>1</td>
        <td>90</td>
   </tr>


    <tr class="sum">
        <td>9</td>
        <td></td>
        <td>second</td>
        <td>7</td>
        <td>3000</td>
   </tr>


    <tr class="sum">
        <td>9</td>
        <td></td>
        <td>second</td>
        <td>7</td>
        <td>3000</td>
   </tr>


    <tr class="sum">
        <td>11</td>
        <td></td>
        <td>pen</td>
        <td>2</td>
        <td>90</td>
   </tr>


    <tr class="sum">
        <td>11</td>
        <td></td>
        <td>pencil</td>
        <td>2</td>
        <td>90</td>
   </tr>

  <tr>
<td colspan="4">Total</td>
<td id="total">42540</td>
</tr>
</tbody>
</table>

js code

  $(document).ready(function () {
        var table = $('#examples').DataTable();
        $('a.toggle-vis').on('click', function (e) {
            e.preventDefault();

            var column = table.column($(this).attr('data-column'));
            column.visible(!column.visible());
        });

        $('#examples tfoot th').each(function () {
            var title = $('#examples thead th').eq($(this).index()).text();
            $(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
        });
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
            });
        });

        $('#exportAttendance222').bind('click', function (e) {

            $('#examples').tableExport({ type: 'excel', escape: 'false', bootstrap: true});
        });
    });

Please help me thanks in advance !!!

Answer 1

METHOD 1

When using Datatable, after using colspan=4, give 3 td as display none

<tr>
    <td colspan="4">Total</td>
    <td style='display:none'></td>
    <td style='display:none'></td>
    <td style='display:none'></td>
    <td id="total">42540</td>
</tr>

Example: https://jsfiddle.net/3mazrcvL/18/

METHOD 2

Is by using tfoot

<tfoot>
    <tr>
        <td colspan="4">Total</td>
        <td id="total">42540</td>
    </tr>
</tfoot>

Example: https://jsfiddle.net/3mazrcvL/17/

METHOD 3

Create a blank tfoot and render tfoot using datatable

HTML

<tfoot>
    <tr>
        <td colspan="4">Total</td>
        <td id="total">0.00</td>
    </tr>
</tfoot>

SCRIPT

var table = $('#examples').DataTable({
                 "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;
                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                                i.replace(/[$,]/g, '') * 1 :
                                typeof i === 'number' ?
                                i : 0;
                    };
                    total = api.column(4).data().reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                    }, 0);
                    $(api.column(4).footer()).html(total);
                },
    });

Example: https://jsfiddle.net/3mazrcvL/19/