jQuery tablesorter が数値を正しく並べ替えない

StackOverflow https://stackoverflow.com/questions/1459710

  •  12-09-2019
  •  | 
  •  

質問

私はここ数日、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>
役に立ちましたか？

解決 2 

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

この問題を解決しました。 桁が仕分け作業が正しい作ったとして価値のを処理するためにJavaScriptを告げます。 それでも数値が数値としてスクリプト内でチェックされないことを愚かなビット。しかし、私は最終的にはそのための高い目的があると思います。

すべてのあなたの時間と助けてくれてありがとう。

/ Fons

他のヒント

彼らはあなたが今簡単に使用することができますtablesorterで、この記事を見つけた場合うまくいけば、これは誰かに役立ちます。

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

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

私は、これは古い質問ですけど、私は非常に同じ問題に出くわして、代わりにここに掲載すべてのソリューションをしようと、あなたが最初にあなたのプラグインのバージョンを確認する必要があります。すべての問題は、私が見つけたときに私は最新バージョン（2.0.5）

を使用して波平解決しました
あなたがあなたのパッドの数字をする必要のように

に見えます。だからこそ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よりも高い値を使用します。

あなたは、同様にこれを試してみてください。

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

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

あなたは同様にあなたの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; 
        } 
    }); 
});

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));
};
所属していません StackOverflow
scroll top