Sort an accordion-table (jquery)

问题

I'm looking for an accordion table which can be sorted and paged. I couldn't find any sort/page plugin which would allow my table to have an accordion effect.

In order to get the accordion effect, and to group each row for manipulation, I used multiple tbody tags.

    <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);
    });
}

In this fiddle, I wrote the collapsing of the hidden panels, but my attempts at "sort" aren't working. http://jsfiddle.net/s5u1p4g7/1/

Can anyone point me to a plugin for paging/sorting a table, which I might alter to fit this html structure? All the ones that I tried are based on TR, not on TBODY, and my attempts to alter them failed. Or help me fix this "sort"?

Thanks!

...

Edit for expanded solution with asc/desc and css: http://jsbin.com/hexovo/1/edit

回答1:

jsBin demo

You were on the right track, I Basically made few changes in selectors, added a better sort logic and fixed the data-* attribute assignments (using .attr()), I've slightly modified your Selectors and variables. Take a look at the changes I did to mapTDs function and other. Hope you'll spot the differences.
(If you have questions feel free to ask!)

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);

P.S: mapTDs is a bit misleading here, we're actually not mapping TD elements, but rather getting every same indexed TD element's text, and assigning that text to the .closest() TBODY element --> into it's data-sortval attribute. Once that's done the sort function is run over those attributes reordering the DBODYes in TABLE.

来源：https://stackoverflow.com/questions/26348441/sort-an-accordion-table-jquery