jQuery DataTables爲thead和tbody提供了不同的對齊方式

我正在使用jQuery DataTables插件。我不希望我的thead列與tbody列排隊，因爲我主要使用標題列作爲排序按鈕。標題名稱不再適合，因爲我在正文欄中顯示額外的信息。jQuery DataTables爲thead和tbody提供了不同的對齊方式

我想THEAD列併攏，並在表的頂部左對齊。我想按照DataTables通常的方式自動調整tbody列的大小。什麼是完成這種造型的最佳方式？

另外，我覺得好像我虐待數據表和一般表元素。如果您知道我的問題的更清晰的解決方案，不涉及滾動我自己的ajax（用於檢索表數據），排序，分頁和篩選，請讓我知道。

來源

2012-10-24 mushroom

請記住，在年底，這是一個表。表格的結構很難改變，標題的寬度將遵循它們包含的主體的寬度。

你說你正在使用的額外信息進行排序？爲什麼不使用任何結構和css來創建容器，然後使用api與數據表進行交互？

您可以按使用API：

$(document).ready(function() { 
    var oTable = $('#example').dataTable(); 

    // Sort immediately with columns 0 and 1 
    oTable.fnSort([ [0,'asc'], [1,'asc'] ]); 
});

舉例來說，如果你寧願表格上方的按鈕，用戶可點擊而不是表的標題本身，你可以這樣做：

<div id="separateStyledContainer"> 
    <button id="sortByColumn2">Sort by Column 2</button> 
</div> 
<table id="datatable"> 
    <thead> 
     <th>Column 1</th> 
     <th>Column 2</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Column 1 Value 1</td> 
      <td>Column 2 Value 1</td> 
     </tr> 
     <tr> 
      <td>Column 1 Value 2</td> 
      <td>Column 2 Value 2</td> 
     </tr> 
    </tbody>    
</table>

而這裏的JS：

$(function() { 

    var table = $("#datatable").dataTable(); 

    $("#sortByColumn2").on("click", function() { 
     table.fnSort([[1,'asc']]);    
    });   

})

Here's a working jsFiddle to check out

這樣，你不對抗表。所有這一切的DataTable的API使得區域提供here

來源

2012-10-24 04:08:04

你能否澄清你所說的「使用任何你想要的結構和css」是什麼意思？我可以使用非表格元素的DataTables嗎？你能指出我的任何例子嗎？謝謝。 – mushroom

我提供了一個例子，查看編輯後的答案。 –

jQuery DataTables爲thead和tbody提供了不同的對齊方式

回答

相關問題