如何使用jquery乘以和求和2列数据表？ - 数据表

Question

我想通过使用JQuery

来显示结果

我使用dataTables库来表显示结果。我想使用数据表jquery或类似

的ajax在2列上应用以下计算

我有两个数组var arr1 = [2,3,4,5];和var arr2 = [4,3,3,1];

(4*2+3*3+4*3+5*1) Total=34

将DataTable用于此表

这是我希望显示的表结果格式的图片。

＆＃13;

＆＃13;

$(document).ready(function() {
  var t = $('#example').DataTable({
    "columnDefs": [{
      "searchable": false,
      "orderable": false,
      "targets": 0
    }],
    "order": [
      [1, 'asc']
    ]
  });

  t.on('order.dt search.dt', function() {
    t.column(0, {
      search: 'applied',
      order: 'applied'
    }).nodes().each(function(cell, i) {
      cell.innerHTML = i + 1;
    });
  }).draw();
});

＆＃13;

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

<table width="100%" class="display" cellspacing="0" id="example">
  <thead>
    <tr>
      <th>ID</th>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th>Closing Balance</th>
      <th>Current Sales * 1.5</th>
      <th>(-) Closing Balance</th>
      <th>Current Order</th>
      <th>Distributor</th>
      <th>Date</th>
    </tr>
  </thead>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

jsfiddle

＆＃13;

＆＃13;

$(document).ready(function() {
  // multiply nsp and closing balance
  $.each(dataSet, function(i, row) {
    row.total = row.nsp * row.closing_balance;
  });


  // Table definition
  var dtapi = $('#example').DataTable({
    data: dataSet,
    "deferRender": false,
    "footerCallback": function(tfoot, data, start, end, display) {
      var api = this.api();
      // adding product of nsp and closing_balance
      // here column 5 contains product so change it
      // accordingly
      var p = api.column(5).data().reduce(function(a, b) {
        return a + b;
      }, 0)
      $(api.column(5).footer()).html(p);
      $("#total").val(p);
    },
    "order": [1],
    "columns": [

      // rest of the columns
      {
        data: "id"
      }, {
        data: "product_name"
      }, {
        data: "nsp"
      }, {
        data: "closing_balance",
      }, {
        data: "date",
      }, {
        data: "total"
      }

    ]
  });
});

// DataTable data set used
var dataSet = [{
  "id": "Airi",
  "product_name": "Satou",
  "nsp": 230,
  "closing_balance": 23,
  "date": "28th Nov 08",
}, {
  "id": "Angelica",
  "product_name": "Ramos",
  "nsp": "191",
  "closing_balance": 131,
  "date": "9th Oct 09",
}, {
  "id": "Ashton",
  "product_name": "Cox",
  "nsp": 191,
  "closing_balance": 37,
  "date": "12th Jan 09",
}];

＆＃13;

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table class="display" id="example">
  <thead>
    <tr>
      <th>ID</th>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Closing Balance</th>
      <th>Date</th>
      <th>NSP * Closing Balance</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>ID</th>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Closing Balance</th>
      <th>Date</th>
      <th>NSP * Closing Balance</th>
    </tr>
  </tfoot>
  <tbody></tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />

＆＃13;

＆＃13;

＆＃13;