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

Posted 2023-05-09

【中文标题】如何使用 jquery 将 2 列数据表相乘和求和？ - 数据表

【英文标题】：How to multiply and Sum 2 columns of datatables using jquery? - Datatables

【发布时间】：2018-04-09 14:21:30

【问题描述】：

我想用 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  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>

【问题讨论】：

我不知道你在说什么

我使用这个“datatables.net”作为表格来显示结果。我想使用数据表 jquery 或 ajax 在这两列上应用这个公式，就像我有两个数组 var arr1 = [2,3,4,5]; var arr2 = [4,3,3,1]; "(4*2+3*3+4*3+5*1) 总计=34"

随时编辑您的问题

@AhsanNajam 无论您问什么，都与您共享的代码不匹配。我无法推断您从哪里获取表数据。请提供必要的代码sn-p。

【参考方案1】：

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

【讨论】：

对不起，我有点困惑，我不知道如何使用数据或此列数据，有没有简单的方法来显示

中的 rowTotal 值，就像我从关闭的数据库中调用值一样余额

你的意思是dataSet的数据？

是的，我想在表格中显示“NSP * 期末余额”列表。我不知道如何使用数据

你上面的代码sn-p运行了吗？如果是这样，那么您可以清楚地看到我将NSP * Closing Balance 作为单独的列

感谢 Prashant 所做的努力。但我的困惑仍然是我不知道如何使用 dataSet，那么我如何才能直接应用于特定的表列值。就像我申请

我希望你能理解我的问题。对不起，我是编程新手。