Сортировать гармошку (jquery)

Question

Я ищу аккордеонный стол, который можно отсортировать и разбить на страницы. Я не мог найти плагин sort / page, который позволил бы моему столу иметь эффект аккордеона.

Чтобы получить эффект аккордеона и сгруппировать каждый ряд для манипуляции, я использовал несколько тегов tbody.

    <tbody>
    <tr>
      <td>1</td>
      <td>Zulu</td>
      <td>Raleigh</td>
      <td>North Carolina</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...hidden panel...</td>
    </tr>
    </tbody>

    <tbody>
    <tr>
      <td>2</td>
      <td>Yankee</td>
      <td>Detroit</td>
      <td>Michigan</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...hidden panel...</td>
    </tr>
    </tbody>

$('.jAccordionTable').each(accordionTable);

function accordionTable(i,elem) {
    var table = $(elem);
    var rows = table.find('tbody');

    //accordion on tbody > tr
    rows.find('tr:first').addClass('table-acc-header');
    rows.find('tr:last').addClass('table-acc-body');    
    $('.table-acc-header').click(function() {
        table.find('.table-acc-body').addClass('collapse');
        $(this).next('.table-acc-body').removeClass('collapse');
    });

    //header sort
    var th_index = 0;

    table.find('th').click(function() {
        var th_index = $(this).index();
        table.find('tbody').each(mapTDs)
        function mapTDs(i,elem) {
            var tds = $(elem).find('td').eq(th_index).map(function() {
                $(this).parents('tbody').data( "sort", $(this).text() );
                return $(this).text();
            })
            console.log(tds);
        }

        rows.sort(function(a,b){
            var an = a.getAttribute('data-sort'),
                bn = b.getAttribute('data-sort');

            if(an > bn) {
                return 1;
            }
            if(an < bn) {
                return -1;
            }
            return 0;
        });

        rows.detach().appendTo(table);
    });
}

В этой скрипке я написал разрушение скрытых панелей, но мои попытки "сортировки" не работают. http://jsfiddle.net/s5u1p4g7/1/

Может кто-нибудь указать мне плагин для разбивки на страницы / сортировки таблицы, который я мог бы изменить, чтобы соответствовать этой структуре HTML? Все, что я попробовал, основаны на TR, а не на TBODY, и мои попытки изменить их потерпели неудачу. Или помочь мне исправить эту "сортировку"?

Спасибо!

...

Редактировать расширенное решение с помощью asc / desc и css: http://jsbin.com/hexovo/1/edit

Answer 1

демоверсия jsBin

Вы были на правильном пути, я в основном сделал несколько изменений в селекторах, добавил лучшую логику сортировки и исправил data-* назначение атрибутов (используя .attr()), Я немного изменил ваши селекторы и переменные. Посмотрите на изменения, которые я сделал в mapTDs функция и прочее. Надеюсь, вы заметите различия.
(Если у вас есть вопросы, не стесняйтесь задавать!)

function accordionTable(i,elem) {
  var table = $(elem),
      tbody = table.find('tbody'),
      th_index = 0,
      th_sortType = "string";

  //accordion on tbody > tr
  tbody.find('tr:first').addClass('table-acc-header');
  tbody.find('tr:last').addClass('table-acc-body');  
  $('.table-acc-header').click(function() {
    table.find('.table-acc-body').addClass('collapse');
    $(this).next('.table-acc-body').removeClass('collapse');
  });

  function mapTDs(i, elem){
    var txt = $("td", elem).eq(th_index).text();
    $(elem).attr("data-sortval", txt);
  }
  function sortAsc(a, b){
    var aData = $(a).attr("data-sortval"),
        bData = $(b).attr("data-sortval");
    if(th_sortType==="int"){ 
      return +bData < +aData ? 1 : -1; // Integer
    }else{   
      return  bData <  aData ? 1 : -1; // String or else
    }
  }

  //header sort
  table.on("click", "th", function() {
    th_sortType = $(this).data('sort');
    th_index = $(this).index();
    tbody = table.find('tbody').each(mapTDs);
    tbody.sort(sortAsc).detach().appendTo(table);
  });
}

$('.jAccordionTable').each(accordionTable);

PS: mapTDs немного вводит в заблуждение здесь, мы на самом деле не картируем TD элементы, но вместо этого получают каждый индексированный текст элемента TD и присваивают этот текст .closest() TBODY элемент -> в это data-sortval приписывать. Как только это будет сделано, функция сортировки будет запущена над этими атрибутами, переупорядочивая DBODYes в TABLE.