Question

我想在jquery数据表页脚中显示总数。这是我的数据表：

这是我的jquery数据表代码：

for (var i = 0; i < length; i++ ) {
    var patient = data.data[i];
    console.log(patient);

    var formattedDate = function() {
        if (patient.Date === null) return "";
        var pattern = /Date\(([^)]+)\)/;
        var results = pattern.exec(patient.Date);
        var dt = new Date(parseFloat(results[1]));
        return (dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear());
    }

    $('#myReportTable').dataTable().fnAddData([
        patient.Name,
        patient.Address,
        //patient.Date,
        formattedDate,
        patient.Description,
        patient.Amount
    ]);
}

$('#myReportTable').DataTable({
footerCallback: function (tfoot, data, start, end, display) {
        var api = this.api();
            $(api.column(4).footer()).html(
            "Total: " + api.column(4).data().reduce(function (a, b) {
                return a + b;
            }, 0)
        );
    }
});

尝试过此代码，但显示错误：

我是这个新手，请帮忙。

Answer 1

您可以使用数据表 Api总数

链接-https://datatables.net/plug-ins/api/sum()

您还可以将drawcallback函数与sum api一起使用计算每次添加记录时的数量。

基本上是这样的；

$('#myReportTable').DataTable( {
    drawCallback: function () {
      var api = this.api();
      $( api.table().footer() ).html(
        api.column(3).data().sum()
      );
    }
  } );

第三列指示您的金额。

Answer 2

您正在代码中两次初始化DataTable（）。只需合并该代码，就不会像您提到的那样抛出错误（无法重新初始化数据表...）。

$(document).ready(function () {
        $('#example').DataTable({
            "footerCallback": function (row, data, start, end, display) {
                total = this.api()
                    .column(4)
                    .data()
                    .reduce(function (a, b) {
                        return parseInt(a) + parseInt(b);
                    }, 0);
                alert(total);
            }
        }).fnAddData([
                patient.Name,
                patient.Address,
                //patient.Date,
                formattedDate,
                patient.Description,
                patient.Amount
            ]);
    });

计算jQuery数据表页脚中的值总和

2 个答案: