排序一个手风琴表(jQuery) [英] 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.

为了获得手风琴效果并分组每一行进行操作，我使用了多个tbody标签.

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

在这个小提琴中，我写了隐藏面板的折叠，但是我尝试排序"没有用. http://jsfiddle.net/s5u1p4g7/1/

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

谁能指出我一个用于对页面进行分页/排序的插件，我可能会对其进行更改以适合此html结构?我尝试的所有方法都是基于TR的，而不是基于TBODY的，并且尝试更改它们的尝试均失败了.还是帮我解决这个排序"问题?

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"?

谢谢！

...

使用asc/desc和css编辑扩展解决方案: http://jsbin.com/hexovo/1/edit

推荐答案

jsBin演示

jsBin demo

您走在正确的轨道上，我基本上对选择器进行了一些更改，添加了更好的排序逻辑并修复了data-*属性分配(使用.attr())，我对选择器和变量进行了一些修改.看看我对mapTDs函数及其他所做的更改.希望您会发现差异.
(如果您有任何疑问，请随时提问！)

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

PS:mapTDs在这里有点误导，实际上我们不是在映射TD元素，而是获取每个相同索引的TD 元素的文本，并将该文本分配给 TBODY元素->到它的data-sortval属性中.完成后，将对这些属性运行sort函数，从而对TABLE中的DBODY进行重新排序.

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.

这篇关于排序一个手风琴表(jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！