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

Question

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

\n\n

"footerCallback": function ( row, data, start, end, display ) {\n            var api = this.api(), data;\n            // Remove the formatting to get integer data for summation\n            var intVal = function ( i ) {\n                return typeof i === \'string\' ?\n                    i.replace(/[\\\xc2\xa3,]/g, \'\')*1 :\n                    typeof i === \'number\' ?\n                        i : 0;\n            };\n            var column_sum = function (col) {\n                // Total over all pages\n                total = api\n                    .column(col)\n                    .data()\n                    .reduce( function (a, b) {\n                        return intVal(a) + intVal(b);\n                    }, 0 );\n                // Total over this page\n                pageTotal = api\n                    .column(col, { page: \'current\'} )\n                    .data()\n                    .reduce( function (a, b) {\n                        return intVal(a) + intVal(b);\n                    }, 0 );\n                return accounting.formatMoney(pageTotal) +\' (\'+ accounting.formatMoney(total) +\' total)\'\n            };\n            // Update footer\n            $( api.column(6).footer()).html(\n                column_sum(6)\n            );\n            $( api.column(9).footer()).html(\n                column_sum(9)\n            );\n        }\n

\n\n

编辑

\n\n

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

\n\n

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

\n\n

<table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="circuit_list"\n role="grid" style="width: 100%;">\n    <thead>\n        <tr>\n            <th>Info</th>\n            <th>Type</th>\n            <th>Cost PM</th>\n            <th>Term</th>\n            <th>Remaining Term</th>\n            <th>Remaining Cost</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td>\n                <a href="/circuits/edit/238/1/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>Fibre</td>\n            <td>\xc2\xa3950.00</td>\n            <td>12</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/238/2/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>Fibre</td>\n            <td>\xc2\xa3950.00</td>\n            <td>12</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/333/101/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>MPLS</td>\n            <td>\xc2\xa31791.33</td>\n            <td>12</td>\n            <td>11</td>\n            <td>\xc2\xa319,704.63</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/334/101/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>MPLS</td>\n            <td>\xc2\xa3100.00</td>\n            <td>12</td>\n            <td>11</td>\n            <td>\xc2\xa31,100.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/235/1/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>MPLS</td>\n            <td>\xc2\xa3593.33</td>\n            <td>36</td>\n            <td>15</td>\n            <td>\xc2\xa38,899.95</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/317/82/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>Fibre</td>\n            <td>\xc2\xa3103.00</td>\n            <td>3</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/229/2/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>MPLS</td>\n            <td>\xc2\xa3373.33</td>\n            <td>36</td>\n            <td>11</td>\n            <td>\xc2\xa34,106.63</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/233/1/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>DSL</td>\n            <td>\xc2\xa31837.66</td>\n            <td>60</td>\n            <td>6</td>\n            <td>\xc2\xa311,025.96</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/234/1/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>DSL</td>\n            <td>\xc2\xa3373.34</td>\n            <td>36</td>\n            <td>15</td>\n            <td>\xc2\xa35,600.10</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/243/5/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>DSL</td>\n            <td>\xc2\xa3373.34</td>\n            <td>36</td>\n            <td>15</td>\n            <td>\xc2\xa35,600.10</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/244/4/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>MPLS</td>\n            <td>\xc2\xa3373.34</td>\n            <td>36</td>\n            <td>12</td>\n            <td>\xc2\xa34,480.08</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/324/83/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>4G</td>\n            <td>\xc2\xa3103.00</td>\n            <td>3</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/2/6/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>4G</td>\n            <td>\xc2\xa341.50</td>\n            <td>12</td>\n            <td>0</td>\n            <td>0.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/57/18/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>4G</td>\n            <td>\xc2\xa345.00</td>\n            <td>12</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/113/35/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>Fibre</td>\n            <td>\xc2\xa345.00</td>\n            <td>12</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/218/71/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>4G</td>\n            <td>\xc2\xa357.00</td>\n            <td>12</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/264/71/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>MPLS</td>\n            <td>\xc2\xa345.00</td>\n            <td>12</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/269/61/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>DSL</td>\n            <td>\xc2\xa345.00</td>\n            <td>12</td>\n            <td>0</td>\n            <td>\xc2\xa30.00</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/300/85/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>4G</td>\n            <td>\xc2\xa330.00</td>\n            <td>12</td>\n            <td>&nbsp;</td>\n            <td>&nbsp;</td>\n        </tr>\n        <tr>\n            <td>\n                <a href="/circuits/edit/307/76/all_cl" class="btn btn-primary btn-circle">\n                    <i class="fa fa-list"></i>\n                </a>\n            </td>\n            <td>4G</td>\n            <td>\xc2\xa345.00</td>\n            <td>12</td>\n            <td>6</td>\n            <td>270.00</td>\n        </tr>\n    </tbody>\n</table>\n

\n

Answer 1

最有可能的是在第 9 列的一个或多个单元格中，那里的值无法转换为数字，并且您得到intVal返回的NaN。

\n\n

intVal有两个问题：

\n\n

\n
1. linei.replace(/[\\\xc2\xa3,]/g, \'\')*1可以返回NaN
\n
2. typeof i === \'number\'对于NaN可以为 true
\n

\n\n

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

\n\n

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

\n\n

如果需要过滤总计，请使用：

\n\n

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

\n\n

或者

\n\n

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

\n