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

Question

这应该是带有按钮的基本数据表设置，我将其与引导程序一起使用，所以按照建议我做了：

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

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

没关系，它显示了所有按钮。问题是我需要表本地化，当我使用 ie 时：

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

有关代码和演示，请参阅此 jsFiddle 。

解决方案#2

您还可以使用直接插入方法，如本例所示，因为用于 Bootstrap 样式的默认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' );  
   }
});

请注意，上面的代码与上面引用的示例不同，因为 DataTables 1.10.9 存在一个问题，如果选项B中没有字符或未指定选项，则无法直接插入按钮。domdom

请参阅此 jsFiddle的代码和演示