Question

在外部下拉列表更改后，我似乎无法刷新DataTable。我正在尝试实现的是在选择语言时转换（源自HTML的）表头，但是true方法似乎没有被调用。任何有关如何解决的想法都值得赞赏。

.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();
});

Answer 1

draw函数仅使用新提供的排序和过滤器刷新数据表，如果列更改则不会。同样，当lang下拉列表上的值更改时，它不会更新数据表，因为它已被初始化。您可以做的是，销毁语言更改后的数据表，然后根据新语言用列将其重新初始化。您还可以使用datatable对象的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>

数据表不会重绘

1 个答案: