当行具有或不具有 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 来实现我需要的结果。它对 SEO 非常不友好，因此在使用它之前请三思；-) 在我的情况下，这是不需要的。

如果有人想做同样的事情，这里有一些基本的 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，您可以对数据源进行排序，然后它会负责重新绘制表行，无论您有多少列:-)

希望它也对其他人有帮助！