排序表不工作时，有行和有没有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 :-)

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