jQuery tablesorter - Не сортирующая колонка с отформатированным значением валюты - PullRequest
22 голосов
/ 27 января 2012

jQuery 1.7.1 и плагин таблиц - у меня есть валютный столбец с тысячами разделителей и такими значениями, как $ 52,00 $ 26,70 $ 100,00 $ 50,00 $ 1 002,00 $ 1 102,00.Когда я пытаюсь отсортировать сортировку следующим образом,

   $1,002.00  
   $1,102.00
   $26.70
   $50.00
   $52.00
   $100.00

Нужны такие значения, как,

   $26.70
   $50.00
   $52.00
   $100.00
   $1,002.00  
   $1,102.00

Пробовал много решений, упомянутых здесь, но безуспешно.

Ответы [ 4 ]

31 голосов
/ 27 января 2012

Tablesorter позволяет вам определять " пользовательские парсеры " для подобных вещей.

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

$(function() {
    $("table").tablesorter({
        headers: {
            6: {//zero-based column index
                sorter:'thousands'
            }
        }
    });
});

Возможно, вам придется настроить функцию форматирования, которую я не проверял.

24 голосов
/ 02 июля 2012

Если вы просто хотите исправить номера валют (самый быстрый):

<script type="text/javascript">
    $("table").tablesorter({
        textExtraction: function(node){ 
            // for numbers formattted like €1.000,50 e.g. Italian
            // return $(node).text().replace(/[.$£€]/g,'').replace(/,/g,'.');

            // for numbers formattted like $1,000.50 e.g. English
            return $(node).text().replace(/[,$£€]/g,'');
         }
    })
</script>

<td><span>£80,000.00</span></td>

Мне не нравятся эти 3 других предлагаемых решения в StackOverflow:

  1. 'Использовать пользовательский анализатор и применять в таблице сортировку init' - нельзя использовать повторно для таблиц лотов
  2. «Использовать собственный анализатор и применять к классу ячейки таблицы» - грязная разметка
  3. «Исправление сортировки валюты TableSorters в источнике» - хлопоты для будущих обновлений
15 голосов
/ 02 июля 2012

Если вы хотите исправить все типы данных (наиболее гибкие):

<script type="text/javascript">
    $(function() {
        $("table").tablesorter({
            textExtraction: function(node){ 
                var cell_value = $(node).text();
                var sort_value = $(node).data('value');
                return (sort_value != undefined) ? sort_value : cell_value;
            }
        })
    })
</script>

<td data-value="2008-04-01">01 Apr 2008</td>
<td>Alice</td>
<td data-value="80.00"><span>£80.00</span></td>

Преимущество этого состоит в отделении отображаемых данных от данных сортировки, более пригодных для повторного использования.

0 голосов
/ 20 октября 2016

Следуя той же идее, предложенной @Ownen, начиная с TableSorter v2.16.0, вы можете использовать атрибут data-text напрямую, без необходимости объявлять свою собственную функцию textExtraction (подробнее здесь ) :

<td data-text="2008-04-01">01 Apr 2008</td>
<td>Alice</td>
<td data-text="80.00"><span>£80.00</span></td>

Этот атрибут работает и с другими виджетами, например math .

Примечание: чтобы заставить его работать с выходным виджетом , необходимо объявить параметр output_dataAttrib:

$('#table').tablesorter({
    widgets: ["output"],
    widgetOptions : {
       output_dataAttrib: 'data-text'
    }
});
...