dataTable使用Footer回调搜索个人以对列货币求和

Question

我尝试使用Footer回调添加到表搜索个体以汇总货币，但我无法写出正确的代码。

的HTML

<table id="example">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
        <th>price</th>
    </tr>
</thead>
<tfoot class='footer'>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
        <th>price</th>
    </tr>
</tfoot>
<tfoot class='custo'>
  <tr >
      <th colspan=5 style=text-align:right>Total:</th>
      <th></th>
  </tr>
</tfoot>
<tbody>
    <tr>
        <td>Trident</td>
        <td>Internet Explorer 4.0</td>
        <td>Win 95+</td>
        <td> 4</td>
        <td>X</td>
        <td>R$ 1.000,00</td>
    </tr>
    <tr>
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td>5</td>
        <td>C</td>
        <td>R$ 2.000,00</td>
    </tr>
    <tr>
        <td>Trident</td>
        <td>Internet Explorer 5.5</td>
        <td>Win 95+</td>
        <td>5.5</td>
        <td>A</td>
        <td>R$ 500,00</td>
    </tr>
</tbody>

JS

/* add input text for table  footer */
$('#example tfoot.footer th').each( function () {
 var title = $(this).text();
 $(this).html( '<input type=\"text\"/>' );
});
/* add the sum of currency */                   
var table = $('#example').DataTable({
 // code for footerCallback goes here but its not working 

 'footerCallback': function ( row, data, start, end, display ) {
   var api = this.api(), data;
   var intVal = function ( i ) {
     return typeof i === 'string' ?
      i.replace(/[\R$,]/g, '')*1 :
      typeof i === 'number' ?
          i : 0;
 };
total = api
  .column( 5 )
  .data()
  .reduce( function (a, b) {
      return intVal(a) + intVal(b);
  }, 0 );
pageTotal = api
  .column( 5, { page: 'current'} )
  .data()
  .reduce( function (a, b) {
      return intVal(a) + intVal(b);
  }, 0 );
$( api.column( 5 ).custo() ).html(
  '$'+pageTotal +' ( $'+ total +' total)'
 );
}




});
/* make the search indvidual when keyup change. */
table.columns().every( function () {
 var that = this;
 $( 'input', this.footer() ).on( 'keyup change', function () {
    if ( that.search() !== this.value ) {
        that
            .search( this.value )
            .draw();
    }
 });
});

此处没有总和货币的示例：http://jsfiddle.net/minamagdy666/e88yrhaj/13/

我想在该链接上使用sum货币的示例：enter link description here

由于

Answer 1

做这个例子：

const Table = $('#foo').DataTable({
    . . . . . .,
    . . . . . .,
       drawCallback: function(){
          Table.columns(5, {
            page: 'current'
          }).every(function() {
            var sum = this
            .data()
            .reduce(function(a, b) {
               var x = parseFloat(a) || 0;
               var y = parseFloat(b) || 0;
               return x + y;
            }, 0);
          console.log(sum);
          $(this.footer()).html(sum);
        });
       }
     });

在这种情况下，列是第5列