DataTables не будут перерисованы - PullRequest
Новая
       2

DataTables не будут перерисованы

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

Я не могу обновить DataTable при внешнем выпадающем меню. То, чего я пытаюсь добиться, это перевести (HTML sourced) заголовок таблицы при выборе языка, но метод .draw(), похоже, не вызывается. Любые идеи о том, как это исправить, приветствуются. 

var lang = {en:['code','name','qty'], es:['codigo','nombre','cantidad'], fr:['code','prenom','quantite']};
var dataTable = $('#dataTable').DataTable({
	sDom: 'ts',
  columns: [
  	{data: 'code', title: lang[$('#lang').val()][0]},
    {data: 'name', title: lang[$('#lang').val()][1]},
    {data: 'qty', title: lang[$('#lang').val()][2]}
  ]
});

$('#lang').on('change', function(){
	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="lang">
  <option value="en">EN</option>
  <option value='es'>ES</option>
  <option value="fr">FR</option>
</select>
<table id="dataTable">
  <thead>
    <th>id</th>
    <th>name</th>
    <th>qty</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Toyota Camry</td>
      <td>8</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Ford Focus</td>
      <td>6</td>
    </tr>
      <td>3</td>
      <td>KIA Sportage</td>
      <td>4</td>
  </tbody>
</table>
</body>
</html>

1 Ответ

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

Функция рисования только обновляет данные с помощью только что предоставленной сортировки и не фильтрует их при изменении столбцов. Кроме того, когда значение в раскрывающемся списке lang изменяется, оно не обновляет объект данных, поскольку он уже инициализирован. Что вы можете сделать, так это уничтожить данные о смене языка и повторно инициализировать его с помощью столбцов в соответствии с новым языком. Вы также можете использовать функцию column().header() объекта с данными для обновления текста меток html. Я обновил ваш код для достижения этого во фрагменте ниже. 

  

              var lang = {en:['code','name','qty'], es:['codigo','nombre','cantidad'], fr:['code','prenom','quantite']};
      
      
          
        
    var datatable =datatable=$('#dataTable').DataTable({
              sDom: 'ts',
            columns: [
                {data: 'code', title: lang[$('#lang').val()][0]},
              {data: 'name', title: lang[$('#lang').val()][1]},
              {data: 'qty', title: lang[$('#lang').val()][2]}
            ]
          });
      
         
          $('#lang').on('change', function(){
             updateColumnLabels();
          });
  function updateColumnLabels(){
    $(datatable.column(0).header()).html(lang[$('#lang').val()][0]);
    $(datatable.column(1).header()).html(lang[$('#lang').val()][1]);
    $(datatable.column(2).header()).html(lang[$('#lang').val()][2]);
  }
<!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="lang">
  <option value="en">EN</option>
  <option value='es'>ES</option>
  <option value="fr">FR</option>
</select>
<table id="dataTable">
  <thead>
    <th>id</th>
    <th>name</th>
    <th>qty</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Toyota Camry</td>
      <td>8</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Ford Focus</td>
      <td>6</td>
    </tr>
      <td>3</td>
      <td>KIA Sportage</td>
      <td>4</td>
  </tbody>
</table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...