排序表不工作時，有行和有沒有colspan

Question

我有一個表顯示事件列表，每個事件也有一個最初隱藏的細節行，並將通過單擊按鈕變得可見。

的標記看起來是這樣的：

<table> 
    <thead> 
     <tr> 
     <th>Header 1</th> 
     <th>Header 2</th> 
     <th>Header 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="i-am-always-visible"> 
     <td>Event date</td> 
     <td>Event name</td> 
     <td>Event location</td> 
     </tr> 
     <tr> 
     <td colspan="3" class="i-am-hidden-by-default"> 
      Contact form 
     </td> 
     </tr> 
    </tbody> 
</table> 

這是JS我使用的設置我的排序表

$('#tableId').dataTable({ 
    "bPaginate": false, 
    "bAutoWidth": false 
}); 

沒有棘手的部分來自於：我要打表排序與jQuery插件dataTables和它似乎不能處理與colspan行，我無法找到任何配置選項，我可以傳遞給dataTables在初始化正確處理這些行。

有沒有人遇到過相同的問題，並解決它或可以指向我正確的地方有關這個問題的信息是可用的？

在此先感謝！

Answer 1

實際上，這似乎不適用於我在網上找到的任何庫/腳本。似乎這是一項非常艱鉅的任務。我最終使用knockout.js來實現我所需要的結果。這是非常不友善的搜索引擎優化，所以在使用它之前考慮兩次;-)在我的情況下，這是不需要的。

如果有人想以做同樣的事情，這裏的一些基本knockout.js代碼：

function myViewModel() { 
    var self = this; 

    self.data = ko.observableArray([ 
      {"id":1, "date":"2012/01/01", "name":"bar", "location":"New York City"}, 
      {"id":2, "date":"2012/01/01", "name":"bar", "location":"New York City"}, 
      {"id":3, "date":"2012/01/01", "name":"bar", "location":"New York City"} 
    ]); 

    self.sortData = function() { 
      self.data.sort(function(left, right) { 
       // ... custom sorting code ... 
      }); 
    } 
} 

視圖

<table> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Location</th> 
     </tr>   
    </thead> 
    <tbody data-bind="foreach: data"> 
     <tr class="i-am-always-visible"> 
      <td data-bind="text: id"></td> 
      <td data-bind="text: name"></td> 
      <td data-bind="text: location"></td>    
     </tr> 
     <tr> 
      <td colspan="3" class="i-am-hidden-by-default"> 
       Contact form 
      </td> 
     </tr> 
    </tbody> 
</table> 

它是如何工作的？
通常，排序HTML表格的腳本會對HTML節點進行排序，因爲他們對數據源沒有任何瞭解。使用knockout.js對數據源進行排序，然後重新繪製表格行，無論您擁有多少colspans :-)

希望它也可以幫助其他人！