Datatables页脚回调返回NaN所有行总计

Question

我是新来的使用数据表和由于某种原因，当我实现这里引用的footercallback代码：https://www.datatables.net/examples/advanced_init/footer_callback.html 我的页面总金额列的所有页面不断回来作为NaN的。每页总数工作正常。

HTML：

<div class="col-lg-9 table-responsive" id="tableCont"> 
<div class="dataTables_paginate"></div> 
<table style="width:2850px;" class="table table-bordered table-hover table-striped table-responsive" id="fundQueryDataTbl" 
     data-body="@Url.Action("GetFundingData", "FundingProfiles", new { fundingYear = Model.FiscalYear })" 
     data-header="@Url.Action("GetColumnNames", "FundingProfiles", new { fundingYear = Model.FiscalYear })"> 
    <thead> 
     <tr></tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
    </tfoot> 
</table> 

脚本：

$('#fundQueryDataTbl').DataTable({ 
    initComplete: function() { 
     //Column names identified as DDL search - 5/6/16 
     var txtSearchNames = ['Funding Category', 'Funding Subcategory', 'Award Class', 'Grant Class Desc', 'Grant Type Desc', 'Us Territory']; 

     this.api().columns().every(function() { 

      var column = this; 
      var columnName = $(this.header()).text(); 

      //Certain columns were decided upon to have text searches as opposed to DDL. 
      if (txtSearchNames.indexOf(columnName) > -1) { 

       //Client wanted title to have/in it - cannot set that in FQ Model prop name. 
       if (columnName === "Us Territory") { 
        $(this.header()).text('US/Territory'); 
        this.draw(); 
       } 

       var select = $('<select class="form-control"><option value=""></option></select>') 
        .appendTo($(column.header())).on('change', function() { 

         var val = $.fn.dataTable.util.escapeRegex($(this).val()); 

         column.search(val ? '^' + val + '$' : '', true, false).draw(); 
        }); 

       column.data().unique().sort().each(function (d, j) { 
        select.append('<option value="' + d + '">' + d + '</option>'); 
       }); 


      } else { 

       $('<input type="text" placeholder="Search" class="form-control">') 
        .appendTo($(column.header())).on('keyup change', function() { 

         column.search(this.value).draw(); 
        }); 
      } 


     }); 
    }, 

    //responsive: true,   
    ordering: false, 
    bPaginate: true, 
    deferRender: true, 
    scrollY: '80vh', 
    scrollX: true, 
    autoWidth: false, 
    dom: 'Brtip', 
    buttons: [ 
     { extend: 'pageLength' }, 
     $.extend(true, {}, cleanHeaderRow, { 
      extend: 'excel', 
      text: 'Save in Excel' 
     }), 
     $.extend(true, {}, cleanHeaderRow, { 
      extend: 'csv', 
      text: 'Save in CSV' 
     }) 
    ], 
    ajax: { 
     "url": url, 
     "dataSrc": "" 
    }, 
    "footerCallback": function (tfoot, 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 
     total = api 
      .column(16) 
      .data() 
      .reduce(function (a, b) { 
       return intVal(a) + intVal(b); 
      }, 0); 


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

     // Update footer 
     $(api.table().footer()).html(
      '$ ' + pageTotal + ' ' + total 
     ); 

     $(tfoot).find('th').eq(0).html('$' + pageTotal + ' over all total: $' + total); 
    }, 
    columns: declareColumns(columnKeys) 
}); 

DATATABLE图像：

Answer 1

正在打击评论系统，所以就把这个放在这里。随着更新的评论，你的括号正在给这里负数的问题是什么，我会建议：

// Remove the formatting to get integer data for summation 
 
var intVal = function (i) { 
 
    if(typeof i === 'string') { 
 
    let multiplier = /[\(\)]/g.test(i) ? -1 : 1; 
 
    
 
    return (i.replace(/[\$,\(\)]/g, '') * multiplier) 
 
    } 
 
    
 
    return typeof i === 'number' ? 
 
    i : 0; 
 
}; 
 

 

 
console.log(intVal("$123,234")) 
 
console.log(intVal("($123,234)")) 
 
console.log(intVal(new Date())) 
 
console.log(intVal(55))

我会强烈建议你看看一些自定义的渲染，而不是你有什么功能。如果你喜欢并且根据渲染请求以不同的方式返回格式化的数据，你可以为每列定义一个不同的渲染函数（显示，排序，过滤器，..等等）。