如何使用 DataTables“jQuery 插件”向表中添加小计和总计？答案

【问题标题】：How can I add a subtotal and a grandtotal to my table using DataTables "jQuery Plug-in?"如何使用 DataTables“jQuery 插件”向表中添加小计和总计？
【发布时间】：2016-06-23 01:57:23
【问题描述】：

我正在尝试使用Datatables 插件来显示报告的数据。

我喜欢在我的表格中添加 2 个页脚行，第一行用于小计“当前页面的总计”，另一行用于 Granttotal“所有页面的总计”

我在文档中按照example 尝试添加行，但由于某种原因，页脚没有显示。

在初始化数据表后，我使用 Ajax 请求动态填充数据表。以下是我当前的代码。

这是我的 HTML 标记

<table id="reportTable" class="table table-striped " cellspacing="0" style="width: 100%;">
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

这是我的 JavaScript 代码

$(function(e) {

    $(window).load(function (e) {

        $('#reportTable').DataTable({
            pageLength: 50,
            lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
            order: [   [ 2, 'desc' ]  ],
            columns: [
                { data: 'chain_name', title: 'Chain Name', width: '20%'},
                { data: 'store_id' , title: 'Store Number' },
                { data: 'completed', title: 'Total Completed' },
                { data: 'initial_quota', title: 'Target To Complete' },
                { data: 'total_callable', title: 'Total In Queue' },
                { data: 'current_status', title: 'Current Status' },
                { data: 'wgtstamp', title: 'Weight' }
            ]
            ,
            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 completedSubTotal = api
                    .column(2)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Total over this page
                var completedGrandTotal = api
                    .column(2, { page: 'current' })
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Update footer with a subtotal
                $(api.column(2).footer()).html(completedSubTotal);

                // Update footer with a grand total
                $(api.column(2).footer()).html(completedGrandTotal);
            }


        });
    });


    $('input:search').on('keyup', function () {
        $('#reportTable').DataTable().search(this.value).draw();
    });

    $('#CampaignMenu').change(function(e) {

        $('#reportTable').DataTable().clear().draw();
        var campId = $(this).val();

        if (campId != '0') {

            $.ajax({
                type: 'POST',
                url: '@Url.RouteUrl("AccountQuotaDashboard.GetReportData")',
                data: { 'campaign_id': campId },
                dataType: 'json',
                success: function (json) {

                    if (json && !$.isEmptyObject(json)) {

                        var table = $('#reportTable').dataTable().fnAddData(json);

                    }

                }
            });

        }

    });

});

如何正确地将 2 页脚行添加到我的数据表中？

更新

我创建了一个文件来向您展示正在运行的代码http://live.datatables.net/yubuyewi/2。如您所见，除了总行数之外，一切正常

【问题讨论】：

标签： javascript jquery html datatable datatables

【解决方案1】：

您需要更改表格的tfoot 部分并添加tr 和th 才能获得这样的小计和总计。

<tfoot><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>

您还交换了小计和总计的计算。

在总计计算中，您使用了page: current，它应该在小计计算中使用。

更正了脚本，新的小提琴是here

【讨论】：