jQuery Datatables - footerCallback sum列，表总数的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Datatables - footerCallback sum列，表总数的问题相关的知识，希望对你有一定的参考价值。
香港专业教育学院创建了一个函数，我可以调用列，我希望使用下面的总结。但是第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> </td>
<td> </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列的一个或多个单元格中，其值无法转换为数字，并且您将获得由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"})
以上是关于jQuery Datatables - footerCallback sum列，表总数的问题的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 4|5|6|7|8|9|10的jQuery DataTables API