jQuery tableorter: расставьте приоритеты в столбцах (как при подсчете медалей: сначала золото, затем серебро, потом бронза)

Question

В настоящее время я работаю над альтернативным подсчетом медалей для Олимпийских игр и использую плагин TableSorter, чтобы дать пользователю возможность взглянуть на данные с разных точек зрения.

Я придерживаюсь точки, в которой речь идет о правильном порядке рядов: если у двух стран одинаковое количество золотых медалей, вы посмотрите на серебряные медали. Нация с большим количеством серебряных медалей получает первое место, нация с меньшим количеством серебряных медалей получает второе место.

Как я могу добиться этого с помощью TableSorter?

Вы можете взглянуть на источник на http://www.benedictzinke.de/olympia

К настоящему времени он отсортирован по золотым медалям на 10 спортсменов. Это все хорошо отсортировано для стран, которые выиграли хотя бы одну золотую медаль. Но ряды народов без золотой медали запутались.

Answer 1

Я думаю, что самым простым решением было бы скрыть взвешенное значение медали в столбце медалей.

Например, давайте посмотрим на Корею против Румынии. Я включил в скобки взвешенные значения, которые в основном представляют собой число медалей каждого типа, включая ведущие нули (поэтому "2" становится "002")

Country  G (gggsssbbb)  S (sssgggbbb)  B (bbbgggsss)
Korea   12 (012005006)  5 (005012006)  6 (006012005)
Romania  2 (002005002)  5 (005002002)  2 (002012002)

Теперь, если мы отсортируем столбец серебряной медали, вы увидите, что в Корее 005012006 больше чем в Румынии 005002002 и будет сортировать Корею перед Румынией.

Теперь о коде, который устанавливает все это, прежде чем мы даже вызовем TableSorter, и демо

$('#medal_count').find('tbody tr').each(function(){
    var pref = '<span style="display:none">', // span that hides the weighted value
        suff = '</span>',
        $t = $(this),
        $c = $t.children(),
        gold = ("000" + $c.eq(4).text()).slice(-3), // add leading zeros
        silver = ("000" + $c.eq(5).text()).slice(-3),
        bronze = ("000" + $c.eq(6).text()).slice(-3);
    // add hidden weighted medal values
    $c.eq(4).prepend(pref + gold + silver + bronze + suff);
    $c.eq(5).prepend(pref + silver + gold + bronze + suff);
    $c.eq(6).prepend(pref + bronze + gold + silver + suff);
});

$("#medal_count").tablesorter({
    textExtraction : function(node){
        var $n = $(node);
        // only return the weighted values if a span exists
        return ($n.find('span').length) ? 
            $n.find('span').text() :
            $n.text();
    },
    sortList: [[8, 1]]
});

Answer 2

Используя плагин TableSorter, вы должны ссылаться на документы о написании вашего собственного парсера. Смотрите это здесь: http://tablesorter.com/docs/example-parsers.html

То, что вы просите, кажется, почти точно соответствует примеру, используемому в документах. Для удобства код из документации скопирован ниже.

// add parser through the tablesorter addParser method 
$.tablesorter.addParser({ 
    // set a unique id 
    id: 'grades', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // format your data for normalization 
        return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

$(function() { 
    $("table").tablesorter({ 
        headers: { 
            6: { 
                sorter:'grades' 
            } 
        } 
    }); 
});  

Для ваших целей код будет выглядеть так:

// add parser through the tablesorter addParser method 
$.tablesorter.addParser({ 
    // set a unique id 
    id: 'medals', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // format your data for normalization 
        // Note the 'i' added after the medal type, that makes it case insensitive.
        return s.toLowerCase().replace(/gold/i,2).replace(/silver/i,1).replace(/bronze/i,0); 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

$(function() { 
    $("table").tablesorter({ 
        headers: { 
            6: {  // Replace '6' with the number of the column that your medals are in
                sorter:'medals' 
            } 
        } 
    }); 
});