Question

这应该是带按钮的基本数据表设置，我将它与引导程序一起使用，以及suggested我做了：

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

请参阅this jsFiddle以获取代码和演示。

解决方案＃2

您还可以使用this example中所示的直接插入方法，因为用于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' );  
   }
});

请注意，上面的代码与上面引用的示例不同，因为如果B选项中没有dom字符，或者DataTables 1.10.9存在issue，则会阻止按钮的直接插入

有关代码和演示的信息，请参阅this jsFiddle

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

1 个答案: