使用 Twitter 时如何定位 DataTables TableTools 控件 Bootstrap

Question

如何在使用 Twitter Bootstrap 主题时更改 DataTable 控件的位置？

我也在使用以下插件：

列重新排序
Table工具

sDom

sDom: 'T<"clear">lRfrtip',

Table:

jQuery(document).ready(function() {
    jQuery('#table').DataTable( {
        sDom: 'T<"clear">lRfrtip',
        sScrollY: "200px",
        sScrollX: "100%",
        oTableTools: {
            "sSwfPath" :"https://cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls.swf",
            "aButtons": [ "copy","csv","xls", "print" ]
        }
    } );
});

工作示例：

https://jsfiddle.net/vdpLm1ow/

问题我正在努力实现以下目标：

|Show |25|entries     |COPY|CSV|XLS|PRINT|    Search|_______|             
-------------------------------------------------------------
|Header 1 |Header 2 |Header 3 |Header 4 |Header 5 |Header 6 |
-------------------------------------------------------------
|         |         |         |         |         |         |
-------------------------------------------------------------
|         |         |         |         |         |         |
-------------------------------------------------------------
Showing 1 to 1 of 1 entries                  |Prev | 1 |Next|

Answer 1

解决方案

您需要使用以下 dom 选项使 TableTools 按钮在页面长度和过滤器控件之间居中。

dom: "<'row'<'col-sm-4'l><'col-sm-4'T><'col-sm-4'f>>R" +
     "<'row'<'col-sm-12'tr>>" +
     "<'row'<'col-sm-5'i><'col-sm-7'p>>",

同时添加以下 CSS 规则：

div.DTTT_container {
  float:none;
  text-align:center;
}

演示版

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

注意

您使用的是 DataTables 1.10，因此我更新了选项名称 (sDom -> dom)，请参阅 this conversion guide 了解更多详情。

使用 Twitter 时如何定位 DataTables TableTools 控件 Bootstrap

How to position DataTables TableTools controls when using Twitter Bootstrap

javascript

dom

datatables

twitter-bootstrap