テーブルの並べ替えで、列がある場合とない場合の両方の行がある場合

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> 

これは私が

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

ないトリッキーな部分がでてくる私のソート可能なテーブルを設定するために使用JSですjQueryプラグインのdataTablesを使用すると、colspanを使って行を処理できないようで、これらの行を適切に処理するために初期化時にdataTablesに渡すことができる設定オプションが見つかりませんでした。

誰かが同じ問題を抱えて解決したか、この問題に関する正しい情報を私に指摘できますか？

ありがとうございます！

Answer 1

実際には、これはウェブ上で見つかったライブラリ/スクリプトでは不可能と思われます。それはかなり難しい作業のようです。私はknockout.jsを使って私が必要とする結果を達成しました。それは非常にSEOの不公平なので、それを使用する前に2回考える;-)私の場合は、これは必要ではなかった。

誰もが同じことをしたい場合は、ここではいくつかの基本的な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を使用すると、データソースを並べ替えることができます。テーブルの行を再描画します。

他の人にも役立つことを願っています。