jQuery Datatables - footerCallback 总和列，表总计问题答案

【问题标题】：jQuery Datatables - footerCallback sum columns, issues with table totaljQuery Datatables - footerCallback 总和列，表总计问题
【发布时间】：2018-02-14 14:33:58
【问题描述】：

我创建了一个函数，我可以在我希望使用下面总结的列上调用它。但是，第 9 列的总计（表格总计）条目始终为零。总页数似乎有效。第 9 列的页面总数和表格总数也有效。

"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;
            };
            var column_sum = function (col) {
                // Total over all pages
                total = api
                    .column(col)
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                // Total over this page
                pageTotal = api
                    .column(col, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                return accounting.formatMoney(pageTotal) +' ('+ accounting.formatMoney(total) +' total)'
            };
            // Update footer
            $( api.column(6).footer()).html(
                column_sum(6)
            );
            $( api.column(9).footer()).html(
                column_sum(9)
            );
        }

编辑

我添加了一些经过清理的数据。目前页面总数适用于第一列和第二列。

所有页面总数不起作用。即每次我按列标题过滤时，我应该看到每页的总数

<table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="circuit_list"
 role="grid" style="width: 100%;">
    <thead>
        <tr>
            <th>Info</th>
            <th>Type</th>
            <th>Cost PM</th>
            <th>Term</th>
            <th>Remaining Term</th>
            <th>Remaining Cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="/circuits/edit/238/1/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>Fibre</td>
            <td>£950.00</td>
            <td>12</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/238/2/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>Fibre</td>
            <td>£950.00</td>
            <td>12</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/333/101/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>MPLS</td>
            <td>£1791.33</td>
            <td>12</td>
            <td>11</td>
            <td>£19,704.63</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/334/101/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>MPLS</td>
            <td>£100.00</td>
            <td>12</td>
            <td>11</td>
            <td>£1,100.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/235/1/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>MPLS</td>
            <td>£593.33</td>
            <td>36</td>
            <td>15</td>
            <td>£8,899.95</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/317/82/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>Fibre</td>
            <td>£103.00</td>
            <td>3</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/229/2/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>MPLS</td>
            <td>£373.33</td>
            <td>36</td>
            <td>11</td>
            <td>£4,106.63</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/233/1/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>DSL</td>
            <td>£1837.66</td>
            <td>60</td>
            <td>6</td>
            <td>£11,025.96</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/234/1/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>DSL</td>
            <td>£373.34</td>
            <td>36</td>
            <td>15</td>
            <td>£5,600.10</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/243/5/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>DSL</td>
            <td>£373.34</td>
            <td>36</td>
            <td>15</td>
            <td>£5,600.10</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/244/4/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>MPLS</td>
            <td>£373.34</td>
            <td>36</td>
            <td>12</td>
            <td>£4,480.08</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/324/83/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>4G</td>
            <td>£103.00</td>
            <td>3</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/2/6/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>4G</td>
            <td>£41.50</td>
            <td>12</td>
            <td>0</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/57/18/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>4G</td>
            <td>£45.00</td>
            <td>12</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/113/35/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>Fibre</td>
            <td>£45.00</td>
            <td>12</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/218/71/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>4G</td>
            <td>£57.00</td>
            <td>12</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/264/71/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>MPLS</td>
            <td>£45.00</td>
            <td>12</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/269/61/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>DSL</td>
            <td>£45.00</td>
            <td>12</td>
            <td>0</td>
            <td>£0.00</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/300/85/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>4G</td>
            <td>£30.00</td>
            <td>12</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>
                <a href="/circuits/edit/307/76/all_cl" class="btn btn-primary btn-circle">
                    <i class="fa fa-list"></i>
                </a>
            </td>
            <td>4G</td>
            <td>£45.00</td>
            <td>12</td>
            <td>6</td>
            <td>270.00</td>
        </tr>
    </tbody>
</table>

【问题讨论】：

您有列数据的样本吗？另外，第 9 栏的表格总数是否有效？您写道：“第 9 列的总（表总）条目始终为零”和“第 9 列的页面总和表总和也有效。”所以哪个是吗？
你能发布一个显示你的问题的 plunker 或 fiddle 吗？

标签： datatables

【解决方案1】：

很可能在第 9 列的一个或多个单元格中，其中的值无法转换为数字，您将得到 intVal 函数返回的 NaN。

intVal有2个问题：

i.replace(/[\£,]/g, '')*1 行可以返回 NaN
typeof i === 'number' 对于 NaN 可能为真

从表面上看，intVal 正在尝试检查这一点，但逻辑是错误的。将 intVal 更改为：

var intVal = function ( i ) {

   if(typeof i === 'string') {
         i = i.replace(/[\£,]/g, '')*1;
   }
   // check if you got a valid number.
   if (Number.isNaN(i)) {
         return 0;
   }
   return i;
};

如果需要过滤后的总数，请使用：

total = api.column(col, {"filter": "applied"})

或

total = api.column(col, {"search": "applied"})

【讨论】：

@AlexW 你能试试上面的intVal吗？
单页总计有效，但多页总计无效。我每页有 10 个整体，但如果过滤搜索中有 20 个整体，它应该显示所有 20 个整体的总数。如果未过滤，则应显示所有内容的总数
我认为您从数据表示例中获得的“intVal”不是防错的。在我的回答中尝试 intVal，我用您的数据进行了测试，并且它有效。
我得到了同样的结果，当前页面总计有效，但过滤后的总计无效，他们总是在这里说相同的样本“£1,175.01（总计£37,862.62）£15,600.15（总计£1,233.49） " 不知道为什么第二个 Total 也有双 £ 符号？
尝试：total = api.column(col, {"filter": "applied"}) 或 total = api.column(col, {"search": "applied"}) 如果我理解正确地你想要过滤的总数。