数据表显示总计

Question

如何在数据表上显示一列的总数？我尝试使用数据表文档示例，但我不明白它是如何工作的。

我尝试像这样调整数据表文档示例：

jQuery('#tableName').DataTable({
    pagingType: 'full',
    lengthMenu: [
        [5, 10, 25, 50, -1], 
        [5, 10, 25, 50, 'All'],
    ],
    searching: true,
    ordering: true,
    aaSorting: [],
    paging: true,
    select: false,
    info: true,
    responsive: true,
    data: [
        { col1: "col1.1", col2: 20 },
        { col1: "col1.2", col2: 30 }
    ],
    columns: [
        { data: 'col1', title: 'col1' }, 
        { data: 'col2', title: 'col2' }
    ],
    dom: 'lBfrtip',
    buttons: [{ 
        extend: 'copy', 
        text: '<i class="far fa-copy"></i>',
        title: lang.componentSection,
        footer: true
    }, { 
        extend: 'pdf', 
        text: '<i class="far fa-file-pdf"></i>',
        title: lang.componentSection,
        footer: true
    }, { 
        extend: 'excel', 
        text: '<i class="far fa-file-excel"></i>',
        title: lang.componentSection,
        footer: true
    }, { 
        extend: 'print', 
        text: '<i class="fas fa-print"></i>',
        title: lang.componentSection,
        footer: true
    }],
    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 over all pages
        var total = api
            .column( 1 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
        // Total over this page
        var pageTotal = api
            .column( 1, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
        // Update footer
        $( api.column( 1 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
});

但我不知道如何显示结果或是否有问题。 （我在控制台中没有错误，这是一个简化的示例，在实际数据表中我从 ajax 获取数据）

我有总值，但我不知道如何用这个sintax（列定义）显示

我可以用jQuery显示总addinf html标签，但是用这种方法总不会导出到pdf、excel、...

这里是示例代码：

jQuery('#tableName').append('<tfoot>\
    <tr>\
        <th colspan="4" style="text-align:right">Total:' + pageTotal + '</th>\
        <th></th>\
    </tr>\
</tfoot>');

Answer 1

esport 页脚的唯一方法是在生成数据表之前对其进行绘制，如下面的简化示例所示：

jQuery('#' + tableName).html('<tfoot>\
    <th></th>\
    <th style="text-align:center; border:0.5px solid gray"></th>\
</tfoot>');

jQuery('#tableName').DataTable({
    pagingType: 'full',
    lengthMenu: [
        [5, 10, 25, 50, -1], 
        [5, 10, 25, 50, 'All'],
    ],
    searching: true,
    ordering: true,
    aaSorting: [],
    paging: true,
    select: false,
    info: true,
    responsive: true,
    data: [
        { col1: "col1.1", col2: 20 },
        { col1: "col1.2", col2: 30 }
    ],
    columns: [
        { data: 'col1', title: 'col1' }, 
        { data: 'col2', title: 'col2' }
    ],
    dom: 'lBfrtip',
    buttons: [{ 
        extend: 'copy', 
        text: '<i class="far fa-copy"></i>',
        title: lang.componentSection,
        footer: true
    }, { 
        extend: 'pdf', 
        text: '<i class="far fa-file-pdf"></i>',
        title: lang.componentSection,
        footer: true
    }, { 
        extend: 'excel', 
        text: '<i class="far fa-file-excel"></i>',
        title: lang.componentSection,
        footer: true
    }, { 
        extend: 'print', 
        text: '<i class="fas fa-print"></i>',
        title: lang.componentSection,
        footer: true
    }],
    footerCallback: function ( row, data, start, end, display ) {
        var api = this.api(), data;
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '.')*1 :
                typeof i === 'number' ?
                    i : 0;
        };
        var total = api.column( 1 ).data()
            .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
        total = total.toString().replace(/[\$.]/g, ',');
        jQuery(api.column( 1 ).footer()).html(total);
    }
});

将所有<th></th> 放入其中很重要，因为 collspan 无法在数据表上正确导出

这个想法是用 jQuery 注入页脚，这样您就可以销毁表并使用相同的页脚重新生成（例如，如果您必须在该表中放置新列或类似的东西）

如果没有api.column( 1 ).data()，它就不能工作，因为如果你把它和 jQuery 放在一起就不能导出。