将总计添加到数据表页脚行

时间:2018-08-26 13:39:48

标签: jquery datatables bootstrap-4

我想将一列的总和(总计)添加到页脚行中。我尝试了以下代码,但没有得到任何结果。

$(document).ready(function() {
    // SUM PLUGIN
    jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
        return this.flatten().reduce( function ( a, b ) {
            if ( typeof a === 'string' ) {
                a = a.replace(/[^\d.-]/g, '') * 1;
            }
            if ( typeof b === 'string' ) {
                b = b.replace(/[^\d.-]/g, '') * 1;
            }

            return a + b;
        }, 0 );
    } );

    $('#userTable1').DataTable({
        "footerCallback": function () {
            var api = this.api(),
                columns = [7,8,9,10,11,12]; // Add columns here

            for (var i = 0; i < columns.length; i++) {
                $('tfoot th').eq(columns[i]).html('Total: ' + api.column(columns[i], {filter: 'applied'}).data().sum() + '<br>');
                $('tfoot th').eq(columns[i]).append('Page: ' + api.column(columns[i], { filter: 'applied', page: 'current' }).data().sum());
            }
        }
    });
});

</script>
<tfoot align="right">
    <tr class="totalColumn">
        <td colspan='6'>Total:</td>
        <td class="totalCol"><?php ?></td>
        <td class="totalCol"></td>
        <td class="totalCol"></td>
        <td class="totalCol"></td>
        <td class="totalCol"></td>
        <td class="totalCol"></td>
    </tr>
</tfoot>

0 个答案:

没有答案