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，您可以对数据源进行排序，然后无论您拥有多少colspans，它都会重新绘制表格行： - ）

希望它也有助于其他人！

在具有和不具有colspan的行时，表中的排序不起作用

1 个答案: