Jquery DataTable列搜索与翻译相冲突

Question

我们使用Jquery DataTable作为我们的网格库。每当我们初始化DataTable时，一切正常。我们的应用程序将支持多种语言环境，所以显然我们希望网格自身翻译。

我们使用我们的文档中发现的标准方法。翻译按预期工作，但列搜索始终没有结果。当我们注释掉列搜索的语言属性。

JSON的文件直接从由库提供的CDN复制。

var locale = $('#locale').text(); 

var advance = $('#advanced-table').DataTable({ 
    dom: 'Bfrtip', 
    // language: { 
    //  'url': '/assets/js/translations/datatable/' + locale + '.json' 
    // }, <- this is causing the column search to break 
    responsive: true, 
    autoWidth: false, 
    buttons: [ 
     { 
      extend: 'excel', 
      exportOptions: { 
       columns: 'thead th:not(.no-sort)' 
      } 
     }, 
     { 
      extend: 'pdf', 
      exportOptions: { 
       columns: 'thead th:not(.no-sort)' 
      } 
     }, 
     { 
      extend: 'print', 
      exportOptions: { 
       columns: 'thead th:not(.no-sort)' 
      } 
     } 
    ] 
}); 

$('#advanced-table tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="' + translator.get('datatable.search') + " " + title + '" /><span class="md-line"></span></div>'); 
}); 

advance.columns().every(function() { 
    var that = this; 

    $('input', this.footer()).on('keyup change', function() { 
     if (that.search() !== this.value) { 
      that 
       .search(this.value) 
       .draw(); 
     } 
    }); 
}); 

Answer 1

好吧..好像它只是一个“简单”的种族条件的情况。该语言加载速度太慢，意味着搜索功能找不到要过滤的正确控件。 通过将搜索功能放入initComplete属性来解决此问题。

var locale = $('#locale').text(); 

var advance = $('#advanced-table').DataTable({ 
    dom: 'Bfrtip', 
    language: { 
     'url': '/assets/js/translations/datatable/' + locale + '.json' 
    }, 
    responsive: true, 
    autoWidth: false, 
    buttons: [ 
     { 
      extend: 'excel', 
      exportOptions: { 
       columns: 'thead th:not(.no-sort)' 
      } 
     }, 
     { 
      extend: 'pdf', 
      exportOptions: { 
       columns: 'thead th:not(.no-sort)' 
      } 
     }, 
     { 
      extend: 'print', 
      exportOptions: { 
       columns: 'thead th:not(.no-sort)' 
      } 
     } 
    ], 
    initComplete: function() { 
     advance.columns().every(function() { 
      var that = this; 
      $('input', this.footer()).on('keyup change', function() { 
       if (that.search() !== this.value) { 
        that 
         .search(this.value) 
         .draw(); 
       } 
      }); 
     }); 
    } 
}); 

$('#advanced-table tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="' + translator.get('datatable.search') + " " + title + '" /><span class="md-line"></span></div>'); 
});