Сортировка в таблице не работает при наличии строк с 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 вы сортируете источник данных, а затем он заботится о перерисовке строк таблицы, независимо от того, сколько у вас есть colspans: -)

Надеюсь, это также поможет кому-то еще!