Question

我使用jQuery创建了一个数据表。该表有七列，其中一列是Grand Total（第6列）。我必须在Grand Total（第6栏）底部的Grand Total（第6列）中显示Grand Total（第6列）的总和。

我该怎么做？我尝试了一些代码，但没有任何效果。 Outout是空白栏目。这是我找到的代码。下面是html代码

HTML

<table class="display table table-bordered table-striped" id="dynamic-table">
  <thead>
    <tr>
      <th>Invoice Type</th>
      <th>Invoice No</th>
      <th>Invoice Date</th>
      <th>Customer Name</th>
      <th>City </th>
      <th>Grand Total</th>
      <th class="hidden-phone">Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th>Total:</th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>
</table>

的JavaScript

function load_datatable() {
  var data = $('input[name=report]:Checked').val();
  var date = $('#rep_date').val();
  var type = $('#type_id').val();
  datatable = $("#dynamic-table").dataTable({
    "bAutoWidth": false,
    "bFilter": true,
    "bSort": true,
    "bProcessing": true,
    "bDestroy": true,

    "bServerSide": true,
    "oLanguage": {
      "sLengthMenu": "_MENU_",
      "sProcessing": "<img src='" + root_domain + "img/loading.gif'/> Loading ...",
      "sEmptyTable": "NO DATA ADDED YET !",
    },
    "aLengthMenu": [
      [10, 20, 30, 50],
      [10, 20, 30, 50]
    ],
    "iDisplayLength": 10,
    "sAjaxSource": root_domain + 'app/invoice/',
    "fnServerParams": function(aoData) {
      aoData.push({
        "name": "mode",
        "value": "fetch"
      }, {
        "name": "report",
        "value": data
      }, {
        "name": "type_id",
        "value": type
      }, {
        "name": "date",
        "value": date
      });
    },
    "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 this page
      pageTotal = api
        .column(5, {
          page: 'current'
        })
        .data()
        .reduce(function(a, b) {
          return intVal(a) + intVal(b);
        }, 0);
      console.log(pageTotal);
      // Update footer
      $(api.column(5).footer()).html('$' + pageTotal);
    },
    "fnDrawCallback": function(oSettings) {
      $('.ttip, [data-toggle="tooltip"]').tooltip();
    }
  }).fnSetFilteringDelay();

  //Search input style
  $('.dataTables_filter input').addClass('form-control').attr('placeholder', 'Search');
  $('.dataTables_length select').addClass('form-control');
}

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列

无法使用数据表在页脚中显示总和

1 个答案: