Динамические ячейки DataTables не будут отображаться - PullRequest
Новая
       3

Динамические ячейки DataTables не будут отображаться

0 голосов
/ 10 января 2019

Я застрял с повторным рендерингом своих датируемых ячеек (столбец «цена») на основе раскрывающегося значения (валюта). Но когда я выбираю валюту, с таблицей ничего не происходит - все цифры остаются неизменными. Есть идеи, почему функция рендеринга не рендерится?

Мой 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>

1 Ответ

0 голосов
/ 10 января 2019

Во-первых, я бы не делал весь утомительный HTML самостоятельно - даже если ваши данные статичны и вам не нужны все функции, предлагаемые таблицей ajax-source, я бы предпочел использовать исходный код javascript - я Можно предположить, что формат входных данных будет ближе к тому, что вы получите от своего SQL или MongoDB, или к какому-либо внутреннему хранилищу, которое вы можете использовать.

Далее я бы отделил вашу модель от представления в терминах MVC и управлял бы исходными данными, а не их визуальным представлением. Даже если ваши данные о ценах в определенной степени всегда остаются неизменными, таблицы данных могут воспринимать их как разные числовые показатели. И, таким образом, вам может потребоваться очистить содержимое с данными и заполнить его новыми цифрами.

Итак, ваш код с небольшими изменениями будет выглядеть так: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...