简体   繁体   English

如何使用jquery将2列数据表相乘和求和? - 数据表

[英]How to multiply and Sum 2 columns of datatables using jquery? - Datatables

I want to show the result by using JQuery我想使用 JQuery 显示结果

I'm using dataTables library for table to show the result.我正在使用dataTables库作为表格来显示结果。 I want to apply following computation on 2 columns using datatables jquery or ajax like我想使用数据表 jquery 或 ajax 对 2 列应用以下计算

I have two arrays var arr1 = [2,3,4,5];我有两个数组var arr1 = [2,3,4,5]; and var arr2 = [4,3,3,1];var arr2 = [4,3,3,1];

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

Using DataTables for this table对这个表使用 DataTables

This is the pic of table result format i want to show like.这是我想展示的表格结果格式的图片。

我想要这样使用 jquer

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

jsfiddle提琴手

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM