如何显示包含语言文件的数据表按钮？

Question

这应该是基本的数据表中设置的按钮，我使用的是与引导，从而suggested我所做的：

var tab= $('#table').DataTable({ 
     buttons: true 
    }); 

tab.buttons().container().appendTo('#table_wrapper .col-sm-6:eq(0)'); 

这很好，它显示了所有按钮。问题是我需要本地化的表格，当我使用，例如：

var tab= $('#table').DataTable({ 
    buttons: true, 
    language: { 
     url: "http://cdn.datatables.net/plug-ins/1.10.9/i18n/English.json"   
    }, 
}); 

tab.buttons().container().appendTo('#table_wrapper .col-sm-6:eq(0)'); 

按钮不显示。我看了语言文件，没有按键值，所以我试图补充：

var tab= $('#table').DataTable({ 
    buttons: true, 
    language: { 
     url: "http://cdn.datatables.net/plug-ins/1.10.9/i18n/English.json",   
     buttons: { 
      print: "Do Print", 
      copy: "Copy to clipboard", 
      pdf: "Make PDF", 
      excel: "Make xlsx", 
      csv: "Prepare csv" 
     } 
    }, 
}); 

tab.buttons().container().appendTo('#table_wrapper .col-sm-6:eq(0)'); 

但按钮仍未显示。你能帮助我吗？ （同样是如果我使用任何其他语言文件。）

Answer 1

溶液＃1

用于dom选项为表容器内显示的按钮以下值：

var table = $('#example').DataTable({ 
    dom: 
     "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" + 
     "<'row'<'col-sm-12'tr>>" + 
     "<'row'<'col-sm-5'i><'col-sm-7'p>>", 
    language: { 
     url: "https://cdn.datatables.net/plug-ins/1.10.9/i18n/English.json"   
    }, 
    buttons: [ 
     'copy', 'pdf', 'excel', 'csv' 
    ] 
}); 

请参阅this jsFiddle的代码和演示。

解决方案＃2

您还可以使用直接插入法，如图this example因为用于引导样式默认dom选项是相当复杂的。

var table = $('#example').DataTable({ 
    language: { 
     url: "https://cdn.datatables.net/plug-ins/1.10.9/i18n/English.json"   
    }, 
    initComplete: function(){ 
     var api = this.api(); 

     new $.fn.dataTable.Buttons(api, { 
     buttons: [ 
      'copy', 'pdf', 'excel', 'csv' 
     ] 
     }); 

     api.buttons().container().appendTo('#buttons'); 
    } 
}); 

注意，以上代码从上述引用的实例中的不同，因为有一个与issue数据表1.10.9防止按钮的直接插入如果在dom选项或选项dom没有B字符没有被指定。

见this jsFiddle代码和演示