web-dev-qa-db-ja.com

jQuerytablesorterが数値を正しくソートしていません

JQueryテーブルソーターがテーブル列の数値を正しくソートできるようにするために何日も努力してきました。

私は両方のスクリプトの現在の最新バージョンを使用しています。

テーブルは正常にレンダリングされますが、数値の並べ替えが正しく機能していません。

数値列を並べ替えると、次の結果が得られます。

8 7 4 32 313など。

あなたが期待する場所：32 318など...

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>
jquerytablesorter
24
Fons
<th width=110 class=\"{sorter: 'digit'}\">Count</th>

これで問題は解決しました。値を数字として処理するようにJavaScriptに指示すると、並べ替えが正しく機能しました。スクリプトで数値が数値としてチェックされていないことは、まだ少しばかげています。しかし、最終的にはもっと高い目的があると思います。

あなたの時間と助けをありがとう

/フォン

26
Fons

うまくいけば、これが誰かがこの投稿を見つけた場合に役立つでしょう。tablesorterで簡単に使用できるようになりました。

$(".table").tablesorter({
     headers: {
         5: { sorter: 'digit' } // column number, type
     }
 });
28
Dave

これは他の人には明らかだったかもしれませんが（私にはわかりませんが）、ソリューションを{sorter： 'digit'}メタデータで機能させるには、 jQueryメタデータプラグイン を使用する必要があります。

5
Jeff Steil

これは古い質問ですが、まったく同じ問題が発生したため、ここに掲載されている解決策を試す代わりに、まずプラグインのバージョンを確認する必要があります。最新バージョン（2.0.5）を使用していないことがわかったときに、すべての問題が解決されました。

3
r0skar

あなたもこれを試すかもしれません：

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

...これは、テキストのみを抽出した後、ソートされたセルのコンテンツを整数として扱います。

2
Paul G Petty

番号を埋める必要があるようです。これが、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より大きい値を使用してください。

2
pjesi

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; 
        } 
    }); 
});
0
tvanfosson

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));
};
0
user2261392