jQuery Table Sortカンマ数値対応させる方法

2 min read

jQuery Table Sort」は、テーブルにソート機能を加えるだけのシンプルなプラグインです。

こんな感じで使用します。(詳しい使い方は配布元を見て頂くとして)

JS

$("#simpleTable").stupidtable();

HTML

<table id="simpleTable">
    <thead>
        <tr>
        <th data-sort="int">int</th>
        <th data-sort="float">float</th>
        <th data-sort="string">string</th>
        </tr>
    </thead>
    <tbody>
  ...
  ... (rest of the table)

対応しているソート機能

  • int
  • float
  • string
以上の3つのみです。 配布元には「出来る限りプラグインを軽くするためにこれだけしか用意してません。てか、これで十分っしょ?(意訳)」 って書いてあります。

本題

確かにソートの種類はこれだけで十分なんですけど、 このint や string では、1,000 とか 1,989 みたいに「,」が入っていると上手くソートしてくれない。 プラグインのソースを見てみる。↓これじゃ単純な数値しかソートできませんよねぇ。
sortFns = $.extend({}, {
  "int":function(a,b){ return parseInt(a, 10) - parseInt(b,10); },
  "float":function(a,b){ return parseFloat(a) - parseFloat(b); },
  "string":function(a,b){ if (a<b) return -1; if (a>b) return +1; return 0;}
}, sortFns);

どうしたらよいか。追加でソート機能が欲しいなら「自分で用意してね(意訳)」と書いてあります。
めんどくさいなぁ、と言いつつ 30 秒ぐらいで出来ました。
JS はこうやって書いて、

$("#simpleTable").stupidtable({
"intComma":function(a,b){ 
  var aNum = a.replace( /,/g, "" );
  var bNum = b.replace( /,/g, "" );
  
  return parseInt(aNum, 10) - parseInt(bNum,10); 
  }
});

ソートしたい(カンマのあるカラム)は、こうやって書いてください

<th data-sort="intComma">int</th>

ちなみに"intComma"はお好きな名前に変えても OK です。

裏ではカンマを除いた数値で並び替えをしてるので、
昇順降順きちんと並び替える事ができるはずです。

このページをシェアする

関連タグ

関連記事

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

[ESLint] 特定のimportにおいてパスの末尾スラッシュを禁止する方法

背景 / やりたいこと / @typescript-eslint/no-restricted-imports を利用した / 余談(末尾のスラッシュ自体を禁止にする)

[JavaScript] Live NodeListとStatic NodeListについて

はじめに / 要素セレクタとは / Live NodeList とは / Static NodeList とは / Live NodeList と Static NodeList の違い / どちらを選択すべきか

近年のWeb開発においてjQueryの利用をやめるべき理由

jQuery の功績と功罪 / 現代の Web 開発と jQuery / jQuery をやめるメリット / jQuery の代替手段 / おわり / Footnotes

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考