How to add two columns using DataTables footerCallback

0

Good friends,

I'm starting now and would like a help to add two columns individually using js.

I have this script that is working to add the n column. 4

This is my html (or link )

<table class="table table-bordered table-hover" id="myTable">

    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.CadastroEmpresa.NomeEmpresa)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Fornecedor.NomeFornecedor)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DataL)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NumeroNFE)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Valor)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Icms)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Vencimento)
            </th>
            <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
                //Posso estar errando aqui!
            <th colspan="4" style="text-align:right" id="total">.</th>
            <th> </th>
       </tr>

    </tfoot>


    <tbody>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.CadastroEmpresa.NomeEmpresa)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Fornecedor.NomeFornecedor)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DataL)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.NumeroNFE)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Valor)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Icms)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Vencimento)
                </td>
                <td>


                    @Html.ActionLink("Editar", "Edit", new { id = item.CadastroNFEID }, new { @class = "btn btn-primary" })
                    @Html.ActionLink("Detalhes", "Details", new { id = item.CadastroNFEID }, new { @class = "btn btn-info" })
                    @Html.ActionLink("Excluir", "Delete", new { id = item.CadastroNFEID }, new { @class = "btn btn-danger" })

                </td>
            </tr>
        }
    </tbody>

</table>

This is the script link (or link )

<script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable({
                "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;

                    // Remova a formatação para obter dados inteiros para o somatório
                    // 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 em todas as páginas
                    // Total over all pages
                    total = api
                        .column(4)
                        .data()
                        .reduce(function (a, b) {
                            return ((intVal(a) + intVal(b)) / 100);
                        }, 0);

                    // Total sobre esta página
                    // Total over this page
                    pageTotal = api
                        .column(4, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return ((intVal(a) + intVal(b)) / 100);
                        }, 0);
                    // Atualizar rodapé
                    // Update footer
                    $(api.column(4).footer()).html(
                        'R$' + pageTotal + ' <br> R$' + total
                    );
                }
            });
        });

    </script>

And I would like help to add column 4 and column 5 individually.

I am using the DataTables library and the footerCallback script.

Thankful

    
asked by anonymous 25.01.2018 / 19:58

0 answers