Question

我正在寻找可以分类和分页的手风琴表。我找不到任何排序/页面插件，这将允许我的表具有手风琴效果。

为了获得手风琴效果，并将每一行分组以进行操作，我使用了多个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 demo

你走在正确的轨道上，我基本上对选择器进行了一些更改，添加了更好的排序逻辑并修复了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元素 - ＆gt;进入它的data-sortval属性。完成后，sort函数将在重新排序TABLE中的DBODYes的那些属性上运行。

对手风琴表进行排序（jquery）

1 个答案: