datatables - jQuery 数据表 - footerCallback 总和列，表总计问题-6ren

datatables - jQuery 数据表 - footerCallback 总和列，表总计问题

转载作者：行者123 更新时间：2023-12-01 13:23:44

我创建了一个函数，我可以调用我希望使用以下内容总结的列。但是第 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 列的一个或多个单元格中，那里的值无法转换为数字，您得到 NaN 由 intVal 函数返回。

intVal 中有 2 个问题:

line 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"})

关于datatables - jQuery 数据表 - footerCallback 总和列，表总计问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48789697/

文章推荐： php - 使用 Blogger Post Image API 上传图片

文章推荐： jsf-2.2 - OmniFaces inputFile 不区分大小写的媒体类型过滤

javascript - 在 Angular 数据表 rowCallback 函数上返回 Angular 数据表
我有一个带有嵌套数据的 angular 数据表，我正在尝试在行点击函数上创建另一个数据表。父数据表的 rowCallBack 函数。这是我的外部数据表 html；这是我生成数据表的方
数据表:在过滤器字符串中包含空格
我有一个字母数字列，其中包含诸如“1、2、2”之类的字符串。当我在搜索中输入“1, 2, 2”时，它似乎返回带有“1,”和“2,”的所有单元格。我该怎么做才能使搜索仅返回“1、2、2”？使用数据
数据表:如何使用附加参数重新加载服务器端数据
我有一个获取其数据服务器端的表，使用自定义服务器端初始化参数，这些参数因生成的报告而异。表格生成后，用户可以打开一个弹出窗口，他们可以在其中添加多个附加过滤器以进行搜索。我需要能够使用与原始表相同的初
数据表 + 隐藏所有列按钮
在 datatables我希望能够隐藏所有列，但似乎无法正确使用语法。这来自下面的代码和上面的链接，创建了一个显示所有列的按钮。有没有办法写这个以便我可以隐藏所有列？ {
数据表:根据值更改单元格颜色
我正在使用 DataTable 创建一个交互式表。我有 9 列，其中 5 列是值。我想根据它们的具体情况更改每个单元格的背景颜色。我已经开始尝试首先更改整行颜色，因为这似乎是一项更容易的任务。但是我
数据表 - 水平滚动时列标题不会移动
我有一个简单的例子来说明我的问题。我正在使用数据表 1.9。当数据表位于另一个 html 表内时，水平滚动时列标题不会移动。当它不在 html 表中时它工作正常。我的示例实际上取自他们的水平滚动示例，
数据表 - 使用嵌套独立表向下钻取行
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
数据表 + 如何将服务器端处理代码与文件导出代码结合起来
这是添加按钮以将数据导出到 csv、pdf、excel 的数据表示例...... fiddle here https://datatables.net/extensions/buttons/examp
angularjs - 数据表 - 更改按钮样式
是否有任何方法可以更改 angularjs 数据表中的按钮样式(colvis、copy、print、excel)。 vm.dtOptions = DTOptionsBuilder.newOptions
R 数据表 - 加入但过滤更新
我试图弄清楚如何加入 2 个数据表并更新第一个但应用了过滤器。 DT DT2 b c 1: 1 10 2: 2 10 3: 3 10 4: 4 10 5: 5 10 6: 6 10 7: 7 10
r - 数据表 - 从另一列按名称选择列的值
我有一个数据表，其中包含许多包含值的列。我还有另一列，它定义了我需要选择哪些列的值。我很难找到一种方法来做到这一点。这是一个简单的例子。 > d d value.1 value.2 name
r - 数据表 - 在几列上应用相同的函数来创建新的数据表列
我正在使用 data.table 包。我有一个数据表，表示用户在网站上的操作。假设每个用户都可以访问一个网站，并对其执行多项操作。我的原始数据表是 Action (每一行都是一个 Action )，我
r - 数据表。快速计算每列内更改次数的方法
我想知道每个变量在每个组中变化了多少次，然后将结果添加到所有组中。我是这样找到的: mi[,lapply(.SD, function(x) sum(x != shift(x), na.rm=T)
button - 数据表 - 添加按钮到页眉或页脚
有人可以向我解释一下如何向页眉或页脚添加按钮吗？Datatables 的开发者 Alan 说你必须离开网络服务器才能使用 Table Tools 来使用按钮。但我在独立计算机上离线运行 Datatab
R 数据表 - 使用当前行之前的所有行计算每一行
我希望按 id 和按顺序(时间)计算不同的东西。例如，与: dt = data.table( id=c(1,1,1,2,2,2,3,3,3), hour=c(1,5,5,6,7,8,23,23,23
jquery - 数据表:没有分页按钮
我正在尝试在 JIRA 小工具中使用数据表，但在我的表准备就绪后，没有可用的分页按钮。我有一个表，我正在以最简单的方式使用数据表:$("#mytableid").dataTable(); 浏览页面元素
jquery - 将输入值保存在子行中 - 数据表
我有 responsive 表单中的数据表。数据表生成 child rows在小型设备上。在这一行中，我有一些输入控件。这会导致两个问题。第一个问题:**隐藏子行中的值不会进入表单数据。** 第二
JQuery 数据表 Keydown
我在使用 JQuery DataTable 捕获 keydown 事件时遇到问题。我的目标是允许用户使用箭头键导航表的行。因此，当用户按下箭头键时，我想捕获 keydown 事件并移动表的选定行(这是
jQuery 数据表，以编程方式更改显示的行数
是否有任何方法可以以编程方式更改显示的行数，而无需从下拉列表中手动选择？我已经知道如何更改默认行数。当表首次加载时，我希望它加载所有行，然后“刷新”表以可能仅显示前 10 行。但我想以编程方式刷新表
jquery - 数据表 - 回调后保留选定的页码
我有一个数据表，我应该对其进行更改，例如我想更改内容的状态，但该内容位于表的第三页。当我更改它时，数据表会自行刷新到第一页。我想做的是保留选定的页码并在刷新后回调它。这可能吗？顺便说一句，我正在使用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

datatables - jQuery 数据表 - footerCallback 总和列，表总计问题