登录
当前位置： 首页 > 知识库问答 >
问题：

手动调用Datatable FooterCallback函数

易奇希
2023-03-14

Datatables插件中的footerCallback函数有问题。

我的表格列出了历史发票。用户可以选中每个表行上的复选框，将发票总额添加到同一行的隐藏列中。

我正在使用脚注回调函数来总结隐藏列中的值。

问题是，footerCallback函数仅在初始页面加载时执行。我需要在每次复选框检查后执行该函数，以便页脚中显示的总和适当更新。

HTML

<table class="table table-bordered" id="datatable">
<thead>
<tr>
<th>Pay In Full</th>
          <th>Pay This Time</th>
            <th></th>
        </tr>
      </thead>
      <tfoot>
        <tr class="foot">
          <th></th>
          <th class="text-right">
            <h3 class="semibold nm mr5" id="amounttopay">$0.00</h3>
          </th>
            <th></th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />109.92
            </div> <span class="one"></span>
          </td>
            <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />6.65
            </div> <span class="two"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />16.65
            </div> <span class="two"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />109.92
            </div> <span class="one"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>

              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />6.65
            </div> <span class="two"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />16.65
            </div> <span class="two"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />109.92
            </div> <span class="one"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>

              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />6.65
            </div> <span class="two"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />16.65
            </div> <span class="two"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />109.92
            </div> <span class="one"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>

              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />6.65
            </div> <span class="two"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />16.65
            </div> <span class="two"></span>
          </td>
             <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />109.92
            </div> <span class="one"></span>
          </td>
          <td class="hidden"></td> 
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />6.65
            </div> <span class="two"></span>
          </td>
            <td class="hidden"></td>
        </tr>
        <tr>
          <td class="text-center payinfull">
            <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
          </td>
          <td class="text-center paythistime">
            <div class="input-group"> <span class="input-group-addon">$</span>
              <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />16.65
            </div> <span class="two"></span>
          </td>
            <td class="hidden"></td>
        </tr>
      </tbody>
    </table>

CSS

.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/square/blue.png) no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox_square-blue {
  background-position: 0 0;
}
.icheckbox_square-blue.hover {
  background-position: -24px 0;
}
.icheckbox_square-blue.checked {
  background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
  background-position: -72px 0;
  cursor: default;
}
.icheckbox_square-blue.checked.disabled {
  background-position: -96px 0;
}
.iradio_square-blue {
  background-position: -120px 0;
}
.iradio_square-blue.hover {
  background-position: -144px 0;
}
.iradio_square-blue.checked {
  background-position: -168px 0;
}
.iradio_square-blue.disabled {
  background-position: -192px 0;
  cursor: default;
}
.iradio_square-blue.checked.disabled {
  background-position: -216px 0;
}
/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox_square-blue,
  .iradio_square-blue {
    background-image: url(blue@2x.png);
    -webkit-background-size: 240px 24px;
    background-size: 240px 24px;
  }
}

jQuery

function init_icheck() {
    $('#datatable input[type=checkbox]').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        increaseArea: '10%'
    });
}

// When Pay in Full Checkbox is Checked fill in Pay This Time Field with Invoice Amount Due Value
function paynow() {
    var payFull = $('input[type="checkbox"].payfull');
    payFull.on('ifChecked', function(event) {
        $(this).parents('tr').find('.paynow').val($(this).val().replace('$', ''));
        Calc();
    });
}

// If Pay in Full Unchecked then remove value from respective Pay This Time Input
// Only bind the ifUnchecked event if the checkbox is checked
function remove_checkbox() {
    var payFull = $('input[type="checkbox"].payfull');
    payFull.on('ifUnchecked', function(event) {
        if ($(this).parents('tr').find('.paynow').val() == $(this).val().replace('$', '')) {
            $(this).parents('tr').find('.paynow').val('');
            Calc();
        }
    });
}

// If Pay This Time changes recalculate total
function recalc_total() {
    $('.paynow').keyup(function() {
        var $ThisCheck = $(this).parents('tr').find('.payfull');
        // Add Commas if # is over 1,000
        $(this).val(addCommas($(this).val()));
        if ($(this).val() == $ThisCheck.val().replace('$', '')) {
            $ThisCheck.iCheck('check');
        } else {
            $ThisCheck.iCheck('uncheck');
        }
        Calc();
    });
}

// Recalc Function
function Calc() {
    var Sum = 0;
    $('.paynow').each(function(index, Obj) {
        var value = parseFloat($(this).val().replace(',', ''));
        if (!isNaN(value)) Sum += value;
    });
    $('#amounttopay').text('$' + Sum.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','));
}

// Add Commas if value > 1,000
addCommas = function(input) {
    // If the regex doesn't match, `replace` returns the string unmodified
    return (input.toString()).replace(
        // Each parentheses group (or 'capture') in this regex becomes an argument 
        // to the function; in this case, every argument after 'match'
        /^([-+]?)(0?)(\d+)(.?)(\d+)$/g,
        function(match, sign, zeros, before, decimal, after) {
            // Less obtrusive than adding 'reverse' method on all strings
            var reverseString = function(string) {
                return string.split('').reverse().join('');
            };
            // Insert commas every three characters from the right
            var insertCommas = function(string) {
                // Reverse, because it's easier to do things from the left
                var reversed = reverseString(string);
                // Add commas every three characters
                var reversedWithCommas = reversed.match(/.{1,3}/g).join(',');
                // Reverse again (back to normal)
                return reverseString(reversedWithCommas);
            };
            // If there was no decimal, the last capture grabs the final digit, so
            // we have to put it back together with the 'before' substring
            return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after));
        }
    );
};

// Calc and update pay this time display
Calc();

// Initialize Datatables
$('#datatable').dataTable({
    "stateSave": true,
    "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;
        };

        // Total over all pages
        if (api.column(2).data().length) {
            var total = api.column(2).data().reduce(function(a, b) {
                return intVal(a) + intVal(b);
            })
        } else {
            total = 0
        };

        // Total over this page
        if (api.column(2).data().length) {
            pageTotal = api
                .column(2, {
                    page: 'current'
                })
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                })
        } else {
            pageTotal = 0
        };

        // Update footer
        $(api.column(2).footer()).html('$' + total);
        alert(total);
    },

    "oLanguage": {
        "sSearch": "Search Results:"
    },
    "initComplete": function(settings) {
        init_icheck();
        paynow();
        remove_checkbox();
        recalc_total();
    }
});
// Reinitialize iCheck on Pagination Change
$('#datatable').on('draw.dt', function() {
    init_icheck();
    paynow();
    recalc_total();
    remove_checkbox();
});

我在下面制作了一把小提琴：

http://jsfiddle.net/tgf59ezr/

共有1个答案

关项明
2023-03-14

您需要调用Drew（）API方法以false作为第一个参数重新绘制表，以指示应保留页码，请参见下面：

$('#datatable').DataTable().draw(false);

此外，您的代码有许多问题，可以简化，甚至不需要上面的调用。

有关代码和演示，请参阅更新的jsFiddle。

 类似资料：
  • 手动调用React render（）函数？[副本]

    我正在经历React生命周期方法，所以一个问题出现在我的脑海中。在这里分享一下：我们能有力地调用React的render（）函数吗？ 就像我们在angular JS中调用$apply()一样

  • Java动态函数调用

    问题内容： 我有一个字符串数组，其中包含类中方法的名称 在课堂上，我正在创建一个实例（例如）。现在，我可以调用，只是我想循环读取String数组。这可能吗？ 问题答案： 您可以使用反射。通过调用完成 您必须处理大量异常，并且您的方法必须为。需要注意的是Java编码惯例喜欢到。 但是，使用反射应该是最后的选择。您应该使用更多的面向对象技术。 如果您经常需要类似的功能，也许您可​​以看看在Java平台

  • 全动态函数调用

    调用回调函数，并把一个数组参数作为回调函数的参数。 local args = {...} or {} method_name(unpack(args, 1, table.maxn(args))) 使用场景 如果你的实参 table 中确定没有 nil 空洞，则可以简化为 method_name(unpack(args)) 你要调用的函数参数是未知的； 函数的实际参数的类型和数目也都是未知的。 伪代

  • wxPython：手动调用事件

    问题内容： 如何通过自己的代码手动调用特定事件？ 问题答案： 我认为您想要wx.PostEvent。 在wxPython Wiki上 还有一些有关从其他线程发布事件以执行长期运行任务的信息。

  • 手动GC调用的用例？

    问题内容： 我已经读过为什么调用System.gc（）以及许多其他方法是一种不好的做法，例如，这描述了确实造成了灾难性的滥用。但是，在某些情况下，GC花费的时间太长，避免了长时间的停顿，例如，避免垃圾并不是一件容易的事，并且使代码难以维护。 在以下常见情况下，恕我直言，手动调用GC很好： 有多个可互换的Webserve，它们前面都有一个故障转移。 每个服务器使用几GB的堆，STW暂停花费的时间比平

  • JVM如何手动使用本机堆栈进行JAVA函数调用

    它说“jvm堆栈与本机堆栈相同”，如果是这样的话，那么当字节码中有函数调用而不是jvm代码函数调用时，jvm如何在堆栈内存上分配堆栈帧。如果JVM代码中有一个函数调用，那么方法、局部变量和其他与方法相关的东西将由OS存储在本机堆栈中。但是，如果字节码指令中有一个函数调用，JVM如何手动将本地文件存储在本机堆栈中。

相关问答

如何窥探动态调用的函数如何用Java手动给webservice调用添加cookie？QuerySchedule WebAPI函数调用用谓词对象调用Java8流中的动态函数在调用promise链后调用Qpromise函数

相关文章

React-router：如何手动调用链接？如何在php中为其他所有函数调用自动调用函数使用动态数量的参数调用动态函数在SQL中调用动态函数名称用Ajax调用函数？

相关阅读

Selenium IDE手动创建测试用例Linux GRUB手动安装空指针调用成员函数及访问成员变量动手写dubbo核心原理ChatGPT怎么用？手把手教你使用 ChatGPT

相关工具

手动旋转屏幕手指滑动特效动态调整UITableViewCell的高度ASIHTTPRequest调用WebService应用之间调用

相关文档

Linux C 函数 使用手册Pandas 函数手册动手学深度学习 v1自己动手写 servlet 容器动手学深度学习 v2
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.