Question

我一直坚持根据下拉值（货币）重新呈现我的数据表单元格（列“价格”）。但是，当我选择货币时，表格没有任何变化-所有数字都保持不变。关于渲染功能为何无法渲染的任何想法？

我的HTML + JavaScript如下：

var oldCurrency = 'usd';
var newCurrency = 'usd';

var myTable = $('#mytable').DataTable({
    sDom: 't',
    columns:[
      {data: 'item', title: 'Item'},
      {data: 'descr', title: 'Description'},
      {data: 'cost', title: 'Cost', render: function(data, type, row){
      	var exchangeRate = {usd: 1, eur: 0.87, gbp: 0.78};
        row.cost = row.cost*exchangeRate[newCurrency]/exchangeRate[oldCurrency];
        return row.cost;
      }}
    ]
  });
  
$('#currency').on('focus', function(){
	oldCurrency = this.value;
});

$('#currency').on('change', function(){
	newCurrency = this.value;
  myTable.draw();
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="test.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <select id="currency">
    <option value="usd">USD</option>
    <option value="eur">EUR</option>
    <option value="gbp">GBP</option>
  </select>
  <table id="mytable">
    <thead>
      <th>Item</th>
      <th>Description</th>
      <th>Cost</th>
    </thead>
    <tbody>
      <tr>
        <td>pen</td>
        <td>writing tool</td>
        <td>5.5</td>
      </tr>
      <tr>
        <td>pencil</td>
        <td>wooden stick</td>
        <td>4.8</td>
      </tr>
      <tr>
        <td>eraser</td>
        <td>piece of rubber</td>
        <td>1.2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Answer 1

首先，我不会自己处理所有乏味的HTML-即使您的数据是静态的，并且您不希望ajax源表提供的所有功能，我还是希望使用javascript源-我可能会猜到，输入数据格式将更接近于您从SQL或MongoDB获得的数据格式，或者可能会使用的任何后端存储。

接下来，我将使用MVC术语从视图中拆分模型，并操纵源数据，而不是其视觉表示。即使您的价格数据在一定程度上始终保持不变，但DataTables可能会将其视为不同的数字。因此，您可能需要清理数据表的内容，并用新的数字填充它。

因此，您的代码进行了一些细微调整，如下所示：

var oldCurrency = 'usd';
var newCurrency = 'usd';

var tableData = [
	{
  	item: 'pen',
    descr: 'writing tool',
    cost: 5.5
  },
  {
  	item: 'pencil',
    descr: 'wooden stick',
    cost: 3.75
  },
  {
  	item: 'eraser',
    descr: 'piece of rubber',
    cost: 1.2
  },
];

var dataTable =
	$('#mytable').DataTable({
    sDom: 't',
    data: tableData,
    columns:[
      {data: 'item', title: 'Item'},
      {data: 'descr', title: 'Description'},
      {data: 'cost', title: 'Cost', render: function(data, type, row){return row.cost.toPrecision(2)}}
    ]
  });



$('#currency').on('focus', function(){
	oldCurrency = this.value;
});

$('#currency').on('change', function(){
	newCurrency = this.value;
  let exchangeRate = {usd: 1, eur: 0.87, gbp: 0.78};
  dataTable.clear();
  $.each(tableData, function(){
  	let entry = JSON.parse(JSON.stringify(this));
  	entry.cost = this.cost*exchangeRate[newCurrency]/exchangeRate[oldCurrency];
    dataTable.row.add(entry);
  });
	dataTable.draw();
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <select id="currency">
    <option value="usd">USD</option>
    <option value="eur">EUR</option>
    <option value="gbp">GBP</option>
  </select>
  <table id="mytable"></table>
</body>
</html>

DataTables动态单元格无法呈现

1 个答案: