如何使用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

對這個表使用 DataTables

這是我想展示的表格結果格式的圖片。

 $(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(); });

 <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>

Answer 1

提琴手

 $(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", }];

 <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" />