Question

我是jquery datatables插件的新手，我正在寻找一种基于事件来计算列的方法。该事件是一个下拉字段，已更改为另一种货币。如果发生此事件，将计算一列。列：

Title | Cost - EUR | Cost - USD

默认成本 - 欧元兑换成美元。在下拉列表更改为GBP后，COST - USD标题必须更改为Cost - GBP（这很容易）并且必须重新计算值。

编辑：

 <div>
    <table id="tableOne" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Project</th>
                <th>Title</th>
                <th>Periode</th>
                <th>Value</th>
                <th>Converted to:<div id="Converted Header"> USD</div></th>
                <th>Funding Source</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th class="filterth"></th>
                <th class="filterth"></th>
                <th class="filterth"></th>
                <th class="filterth"></th>
                <th class="filterth"></th>
            </tr>
        </tfoot>
    </table>
</div>

使用此代码我使用第一个计算初始化我的表：

$('#tableOne').DataTable({
                fixedColumns: true,
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "order": [[0, "desc"]],
                dom: '<"toolbar">frt<"bottom"lip>',
                fnInitComplete: function () {
< SOME INTERNAL CODE >...
},
footerCallback: function (row, data, start, end, display) {
 var api = this.api(), data;
 var intVal = function (i) {
     return typeof i === 'string' ?
        i.replace(/[\$,]/g, '') * 1 :
        typeof i === 'number' ?
        i : 0;
  };
filterTotalConverted = api
                        .column([4], { filter: 'applied' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                    //Write new Sum to column header
                    filterTotalWithSeperator = filterTotalConverted.toLocaleString('en-EN', { style: 'currency', currency: 'USD' })
     $('#costValueSumConverted').empty();
     $('#costValueSumConverted').append('Sum: ' + filterTotalWithSeperator);

"aaData": data,
                "aoColumns": [
{
                        "mData": "0"
                    },
                    {
                        "mData": "Title"
                    },
                    {
                        "mData": "PeriodDetails"
                    },
                    {
                        "mData": "CostValue",
                        render: function (data, type, row) {
                            var value = data.toLocaleString('en-EN', { style: 'currency', currency: base })
                            return value;
                        }
                    },
                    {
                        data: null,
                        render: function (data, type, row) {
                            var value = row.CostValue * currencyConvertValue;
                            value = value.toLocaleString('en-EN', { style: 'currency', currency: convertedTo })
                            return value;
                        }
                    },
                    {
                        "mData": "wb"
                    }
]

第一个问题是列标题求和函数不适用于此计算列
我不知道如何在下拉列表更改后重新计算列...

Answer 1

以下是更改下拉列表时如何更新列标题和值的基本示例。在此示例中，我只是将当前单元格值乘以基于下拉列表中所选内容的值。您需要使用转换因子，以便从一种货币更改为另一种货币。

<强>的jQuery

var dt = $('#example').DataTable({

});

$('#dd').on('change', function() {
  var selected = $(this).val();

  //update column header
  $('.sSpecial').each(function() {
    $(this).text(" " + selected);
  });

  if (selected === "") return;

  //get 3rd column
  var column = dt.column(3);
  var sum = 0;

  //iterate over column data()
  $.each(column.data(), function(index, value) {
    var val = parseFloat(value);
    var factor = parseFloat(selected);

    //update the cell with the new value, and draw()
    dt.cell(index, 3).data(val * selected).draw();

    sum += (val * selected);
  });
//put sum in footer
$( column.footer() ).text(sum);
});

<强> HTML

<select id="dd">
<option value="">Select Something</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<table id="example">
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version<span class="sSpecial"></span></th>
      <th>CSS grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 4.0</td>
      <td>Win 95+</td>
      <td> 4</td>
      <td>X</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.0</td>
      <td>Win 95+</td>
      <td>5</td>
      <td>C</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.5</td>
      <td>Win 95+</td>
      <td>5.5</td>
      <td>A</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>
</table>

小提琴演示：https://jsfiddle.net/zephyr_hex/ssk43otw/49/

在事件发生后计算jquery数据表上的列

1 个答案: