jQuery tablesorter неправильно сортирует число

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

Я использую текущие последние версии обоих скриптов.

Таблица отображается нормально, но сортировка чисел работает некорректно.

Когда я сортирую числовой столбец, он дает мне следующие результаты:

8 7 4 32 31 3 и т.д..

где вы ожидаете: 32 31 8 и т.д...

Я прочитал некоторые комментарии о добавлении дополнительного кода javascript, но не могу найти хороших примеров javascript.

JQuery, который я сейчас использую, выглядит следующим образом:

$(document).ready(function()
    {
      $("#table1")
       .tablesorter(
          {
            sortList: [[0,0]],
            widthFixed: true,
            widgets: ['zebra']
          } )
    }
);

Вот мой HTML:

<table id="table1" class=tablesorter>
    <thead>
        <tr>
            <th width=65>Name</th>
            <th width=40>Count</th>
        </tr>
     </thead>
     <tbody>
         <tr><td>Name_1</td><td>32</td></tr>
         <tr><td>Name_2</td><td>12</td></tr>
         <tr><td>Name_3</td><td>11</td></tr>
         <tr><td>name_4</td><td>14</td></tr>
         <tr><td>Name_5</td><td>7</td></tr>
         <tr><td>Name_6</td><td>3</td></tr>
         <tr><td>Name_7</td><td>32</td></tr>
         <tr><td>Name_8</td><td>31</td></tr>
         <tr><td>Name_9</td><td>35</td></tr>
      </tbody>
</table>

jquery tablesorter
person Fons    schedule 22.09.2009    source источник
comment
Ваши ссылки на «java» должны быть изменены на «JavaScript».   -  person Dave Forgac    schedule 22.09.2009

Ответы (8)


arrow_upward
28
arrow_downward

Надеюсь, это поможет кому-то, если они найдут этот пост, теперь вы можете просто использовать в Tablesorter.

$(".table").tablesorter({
     headers: {
         5: { sorter: 'digit' } // column number, type
     }
 });
person Dave    schedule 11.05.2011
comment
У вас отсутствует конечная фигурная скобка для массива заголовков... позвольте мне исправить это :) - person Shawn31313; 21.05.2012
comment
Примечание для тех, кто видит это все эти годы спустя, столбцы начинаются с 0. - person Andrew Bone; 30.11.2016

arrow_upward
26
arrow_downward 

<th width=110 class=\"{sorter: 'digit'}\">Count</th>

Это решило проблему. Указание javascript обрабатывать значение как цифру сделало сортировку правильной. Все еще немного глупо, что числовые значения не проверяются в скрипте как числа. Но я думаю, что в конце концов для этого есть более высокая цель.

Спасибо всем за ваше время и помощь

/Фонс

person Fons    schedule 01.10.2009
comment
По какой причине вы избежали двойных кавычек в классе? Я работаю с аналогичной проблемой. - person Matt Ball; 07.10.2009
comment
class={sorter: 'digit'} внутри тега th у меня отлично работал. - person Bob Walsh; 08.12.2009
comment
Просто примечание для тех, кто пытается это сделать - вам также необходимо включить файл jquery.metadata.js на свою страницу, чтобы ссылаться на встроенные свойства, подобные этому. - person Matt Healy; 11.07.2011

arrow_upward
5
arrow_downward

Это могло быть очевидно для других (не для меня), но чтобы решение работало с метаданными {sorter: 'digit'}, вам нужно использовать плагин метаданных jQuery.

person Jeff Steil    schedule 22.09.2010
comment
Также есть пример использования метаданных в документации по tablesorter по адресу tablesorter.com/docs/example. -meta-parsers.html. - person Jeff Steil; 22.09.2010

arrow_upward
3
arrow_downward

Вы также можете попробовать это:

$(document).ready(function() { 
    $("table").tablesorter({ 
        // put other options here ...
        textExtraction: function(node) {  
            return parseInt($(node).text()); 
        } 
    }); 
});

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

person Paul G Petty    schedule 31.12.2009

arrow_upward
3
arrow_downward

Я знаю, что это старый вопрос, но я столкнулся с той же проблемой, и вместо того, чтобы пробовать ЛЮБОЕ решение, опубликованное здесь, вы должны сначала проверить версию своего плагина. Все проблемы были решены, когда я обнаружил, что не использую самую новую версию (2.0.5)

person r0skar    schedule 20.05.2012

arrow_upward
2
arrow_downward

Похоже, вам нужно дополнить свои числа. Это объясняет, почему 8, 7 и 4 расположены перед 32 и 31.

Попробуй это:

function padLeft(s,len,c){
  c=c || '0';
  while(s.length< len) s= c+s;
  return s;
}

$("table").tablesorter({
  textExtraction: function(node) {         
    return padLeft(node.innerHTML,2);
  } 
});

Используйте большее значение, чем 2, если вам нужно отсортировать большие числа.

person pjesi    schedule 22.09.2009

arrow_upward
1
arrow_downward

Можете ли вы показать свой html, а? Tablesorter должен обнаруживать и обрабатывать числовую сортировку без каких-либо специальных опций. Возможно ли, что ваши числовые значения окружены html? В этом случае вам может понадобиться специальный метод для извлечения значений из HTML.

Пример из указанной ссылки:

$(document).ready(function() { 

    // call the tablesorter plugin 
    $("table").tablesorter({ 
        // define a custom text extraction function 
        textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].childNodes[0].innerHTML; 
        } 
    }); 
});
person tvanfosson    schedule 22.09.2009

arrow_upward
0
arrow_downward

Найдите в коде jquery.tablesorter.js:

this.isDigit = function(s,config) {

    var DECIMAL = '\\' + config.decimal;
    var exp = '/(^[+]?0(' + DECIMAL +'0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)' + DECIMAL +'(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*' + DECIMAL +'0+$)/';

    return RegExp(exp).test($.trim(s));
};

И замените его на:

this.isDigit = function(s,config) {

    var DECIMAL = '\\' + config.decimal;
    var exp = '/(^[+]?0(' + DECIMAL +'0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)' + DECIMAL +'(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*' + DECIMAL +'0+$)/';

    //return RegExp(exp).test($.trim(s));
    return !isNaN(parseFloat($.trim(s))) && isFinite($.trim(s));
};
person user2261392    schedule 09.04.2013