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

Question

如何在使用Twitter Bootstrap主題時更改DataTables控件的位置？

我也使用以下插件：

• ColReorder
• TableTools

sDom

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

表：

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

SOLUTION

您需要使用以下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; 
} 

DEMO

見this jsFiddle代碼和演示。

注意

您正在使用的數據表1.10，所以我已經更新選項名稱（sDom - >dom），看this conversion guide瞭解更多詳情。