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>'); 
});