如何在标题中通过几种方式对一列进行排序? [英] How to sort one column via several ways in a header?

问题描述

我有一个来自 motti 的表排序器，我找不到一种简单的方法来对某些表进行排序同一标题中2个不同热点区域中以一种以上的方式排列列. (一种通过游戏名称"的方式，另一种通过百分比"的方式.)
我的代码已经按游戏名称对Game进行了排序，但是在单击百分比时它的作用相同(因此后者不是按百分比而是按名称).

I have the tablesorter from motti and I can't find out a simple way to sort a certain column in more than one way from 2 different hot areas in the same header. (One way via "gamename" and another via "percentage".)
My code already sorts on Game on the gamename, but it does do the same when clicking on percentage (so the latter not by percentage, but by name).

执行此操作的最少代码方式是什么? (最好使用现有的tablesorter选项.)

What's the least-code way to do this? (Preferably with existing tablesorter options.)

表格标题列:

<th>Game <span class="percSort">%</span></th>

正文列:

<th class="gamename">
<div style="width:66%;background-color: hsla(84,100%,50%,0.7);"></div>
<span class="name">Alphabetic</span>
<span class="perc">66%</span>
</th>

Domready代码:

    $("#games")
    .tablesorter({
        sortList: [['.percSort',1]],
        textExtraction:{
            1:function(node, table, cellIndex) {
                return $(node).find('.name').text();
            },
            '.percSort':function(node, table, cellIndex) {
                return $(node).find('.perc').text();
            }
       }
    });

我不能做什么::将我的相应列拆分为更多列.它通过可见的CSS显示彩条.

What I cannot do: split my corresponding column in more column. It displays colored bars via the css you can see.

推荐答案

文本提取的工作方式是仅在初始化或更新表时使用.并不是要在同一个单元格中对两个不同的信息块进行排序，而是可以使用它以某种方式设置文本格式，然后使用

The way the text extraction works is that it is only used when the table is initialized or updated. It's not really meant to sort two different blocks of information within the same cell, but it would be possible to use it to format the text a certain way, then use the textSorter option to sort the desired part (demo):

$(function () {

    var $cell;
    $('#games').tablesorter({
        theme: 'blue',
        textExtraction: {
            0: function (node, table, cellIndex) {
                var $n = $(node);
                // add semi-colon between values
                return $n.find('.name').text() + ';' + $n.find('.perc').text();
            }
        },
        textSorter: function (a, b) {
            var x = a.split(';'),
                y = b.split(';'),
                i = $cell && $cell.is('.active') ? 1 : 0;
            return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
        },
        initialized: function () {
            $cell = $('#games').find('.percSort');

            // trigger sort here because any initial sort using sortList
            // won't have the $cell variable defined, so it defaults to name
            $('#games').trigger('sorton', [ [[1,1]] ]);

            $cell.click(function () {
                // activate percentage sort
                $cell.addClass('active');
                return false;
            }).closest('th').click(function () {
                // clicking on header outside of percSort
                // inactivates the percentage sort
                $cell.removeClass('active');
            });

        }
    });

});

---

更新:

---

Updates:

• 要确保未检测到仅使用百分比解析器的列，请在标题中设置排序器类型:

• To make sure the column doesn't get detected to only use a percent parser, set the sorter type in the header:

<th class="nameHead sorter-text">Game...</th>

要使表格最初对百分比进行排序，您需要做两件事:

To make the table initially sort the percent, you need to do two things:

• 将活动"类添加到单元格<span class="perc active">&nbsp;66%&nbsp;</span>

添加$('#games').trigger('sorton', [ [[1,1]] ]);是因为在初始化表排序器之后才定义$cell变量.而且您无法在之前定义它，因为标头是在初始化期间重建的.代码已添加到上面的示例中.

Add $('#games').trigger('sorton', [ [[1,1]] ]); because the $cell variable isn't defined until after tablesorter has initialized. And you can't define it before because the headers are rebuilt during initialization. Code added to the example above.

这篇关于如何在标题中通过几种方式对一列进行排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！