What appened, my footer calback don't work

muriel.raharison

This is my code :

$(table_1.table().container()).on( 'click', 'td', function () {
let cell = table_1.cell( this );
{#let cellContent = $(this).text();#}

                let columnIndex = $(this).index();

                let rowIndex = $(this).closest('tr').index();
                let rowData = table_1
                    .rows(rowIndex)
                    .data()
                    .toArray();

                if ([6].includes(columnIndex)){
                    let info_row = JSON.stringify(cell.index())
                    let data_row = JSON.stringify(rowData)
                    {#console.log(`On cell ${info_row} ==> ${data_row}`)#}
                    let modalHtml = `
                        <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Détail</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <table id="modalTable" class="display" style="width:100%"></table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    $('body').append(modalHtml);

                    let detailsModal = $('#detailsModal');

                    detailsModal.on('shown.bs.modal', function () {
                        $('#modalTable').DataTable().destroy();

                        new DataTable('#modalTable', {
                            ajax: {
                                url: '{% url 'home:details_collection' %}',
                                type: 'POST',
                                data: {
                                    info_row: info_row,
                                    data_row: data_row
                                }
                            },
                            info: false,
                            deferRender: true,
                            filter: false,
                            scrollCollapse: true,
                            scrollX: false,
                            paging: false,
                            fixedColumns: {
                                start: 2,
                                end: 2
                            },
                            scrollY: '50vh',
                            processing: true,
                            createdRow: function (row, data, dataIndex) {
                                $('td', row).eq(0).html(dataIndex + 1);
                            },
                            columnDefs: [
                                {targets: [0, 7], className: 'text-right'},
                                {
                                    targets: [3],
                                    render: DataTable.render.date()
                                },
                                {
                                    target: [0, 8],
                                    render: DataTable.render.number(null, null, 0)
                                },
                            ],

                            columns: [
                                { title: '#', data: null, width: '5%' },
                                { title: 'NUM', data: 'num' },
                                { title: 'TYPE', data: 'types' },
                                { title: 'DATE', data: 'dates' },
                                { title: 'REFERENCE', data: 'ref' },
                                { title: 'DESIGNATION', data: 'designation' },
                                { title: 'FAMILLE', data: 'famille' },
                                { title: 'STATUS', data: 'status' },
                                { title: 'SOLDE', data: 'stu' },
                                { title: 'UNITE', data: 'unite' },
                            ],
                            initComplete: function (row, data, start, end, display) {
                                let footerHtml = `
                                    <tfoot class="bg-dark text-white">
                                        <tr>
                                            <th colspan="7" class="text-right">Total :</th>
                                            <th class="text-right"></th>
                                            <th class="text-right"></th>
                                            <th class="text-right"></th>
                                        </tr>
                                    </tfoot>
                                `;
                                let api = this.api();

                                let total = api
                                    .column(8)
                                    .data()
                                    .reduce((a, b) => convertir(a) + convertir(b), 0);

                                $(this).append(footerHtml);
                                setTimeout(()=>{
                                    console.log(total)
                                    $(api.column(9).footer()).html(total);
                                },1000)

                            },
                        })
                    })
                    detailsModal.modal('show');
                }
            })

muriel.raharison

Hi can have Something in console but not in the html

kthorngren

You need to add the footer to the table before initializing Datatables. Since the footer is not in the DOM when Datatables initializes the column().footer() API doesn't work.

Kevin