Jquery数据表footercallback无效

Question

我需要在表的页脚中显示列值的总和。我使用了jquery数据表插件。为了总结，我正在使用页脚回调功能。它无法正常工作。我收到这样的错误 TypeError：f未定义。这是我从这里得到的https://datatables.net/examples/advanced_init/footer_callback.html。< / p>

$(document).ready(function() {
  $('.data_table_with_footer').DataTable( {
    " 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
     total = api.column( 2 ).data().reduce( function (a, b) {
       return intVal(a) + intVal(b);
      }, 0 );

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

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

在这里，我的ruby on rails代码：

    <table width="100%" class="table table-striped table-bordered table-hover data_table_with_footer" >     
              <thead>
                <tr>
                  <th>Site</th>
                  <th>No.of Files Uploaded</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th colspan="4" style="text-align:right">Total:</th>
                  <th></th>
                </tr>
              </tfoot>
              <tbody>
                <% @dependent_data_upload_success.each do |data|%>
                  <tr>
                    <td><%= data.site %></td>
                    <td class="files_uploaded_count"><%= data.files_count %></td>
                  </tr>
                <% end %>
              </tbody>
            </table>