テーブルのヘッダーをクリックするとソートします。ひらがな、アルファベット、日付などが昇順・降順にソートされているのが確認できると思います。4/16では使い方を紹介します。スポンサーリンク目次1:Tablesorterを読み込む2:HTMLでテーブルを作成3:Tablesorterスクリプトを実行4:スタイルを調整オプションCDNでテーマCSSを読み込む漢字をソートさせる特定の列だけソート機能を外す最初からソートした状態にしておくまとめ1:Tablesorterを読み込むプラグインを読み込む場合は基本的にCDN経由で読み込むのがおすすめです。今回もCDNで読み込みます。cdnjsにTablesorterがあがっているので引っ張ってきましょう。src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js">また、漢字をソートできるようにしたい人は以下の「jquery.metadata.min.js」も読み込んでください。src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/extras/jquery.metadata.min.js">これでTablesorterの読み込みはokです。テーブルのデザインを整えるCSSもCDNで配布されています。使用方法は後述します。テーブルを作ってから。2:HTMLでテーブルを作成HTMLの<table>タグを使ってテーブルを作ります。この時注意するのが、<thead>タグと<tbody>タグを使ってテーブルを作るという点です。Tablesorterは<thead>タグにソート機能を追加するので、<thead>タグを持ったテーブルを作るようにしてください。テーブルの<table>タグにclass="tablesorter"を追加してください。これでソート機能が使えるようになります。スクリプトを実行する際、わかりやすいようにidも一緒に指定しておくといいと思います。「tablesorter.js」みたいなファイルを自分で作って、そこにTablesorterを実行するスクリプトを記述します。スクリプト自体は超簡単で、tablesorter()関数を実行するだけです。$("#myTable").tablesorter();});このスクリプトを記述したファイルをHTMLで読み込めば、ソート機能が使えるようになるはずです。テーブルのヘッダーをクリックするとソートされます。class="tablesorter">となっているか、スペルミスはないかなど確認してみてください。4:スタイルを調整パッと見ソートできるテーブルというのがわかりづらいので、CSSで簡単にスタイルを調整します。以下の部分を調整しておきましょう。5px;}ハイライトが出る箇所は.tablesorter-headerクラス(<thead>内の<th>の部分)なので、そこにスタイルを指定します。class="tablesorter-header-inner">というタグが自動で作成されます。これに::afterで「▼」を表示することでソート機能を強調しています。これでテーブルにソート機能があるということがわかりやすくなりました。オプション一応上記で基本的なTablesorterの使い方は終わりですが、オプションがいくつか用意されているので見ていきましょう。CDNでテーマCSSを読み込むTablesorterにはテーブルのスタイルを整えてくれるCSSがいくつかCDNで配布されています。スタイルはテーマ一覧から確認できます。class=”tablesorter-テーマ名”>にするというようにします。これらのCSSはcdnjsから探しましょう。しててわかりにくいですが、「/css/theme.テーマ名.min.css」となっているのがテーマのCSSです。F」で「min.css」みたいに検索をかけるとハイライトされてわかりやすくなります。テーマを「ice」にしたいなら、そのCSSを先に読み込んでしまいます。class="tablesorter-ice">とクラス名を指定すれば、これだけでiceテーマのテーブルが完成します。漢字をソートさせるTablesorterの標準機能では漢字まではうまくソートさせることができません。手動で数字を振れば漢字でも意図した通りにソートさせることができます。やり方としては、まず以下の「jquery.metadata.min.js」を読み込みます。src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/extras/jquery.metadata.min.js">次に漢字の列の<th>を以下のように記述します。今回は名前の列をきちんとソートさせたいので、<thead>内の名前見出しに以下のように追加しました。'metadata'はシングルクオーテーションで囲むのを忘れずに。関係ない見出しにこれを書くとソートが正しく動作しなくなります。必要な部分にだけ記述するようにしてください。'metadata'}">名前</th>次にテーブルの<td>を以下のように記述します。こちらは行の全てに追加してください。1}">青木</td>これでokです。sortValueに記述した数字がソートの基準となります。最初のテーブルの漢字の名前もこのやり方でソートできるようにしてみます。50音に対応する数字を当ててみました。4/16漢字も{sortValue}に当てた数字を基準としてソートしているのが確認できます。漢字以外でも意図した通りにソートさせることができます。手動になってしまうのが難点ですね。特定の列だけソート機能を外す特定の列だけソート機能を外す場合は、Tablesorterを実行するスクリプトにheadersオプションを記述します。}}});});headers:{}の中にある数字は、「左から数えた列の番号」です。今回なら左から0、1番目の「番号」と「ID」のソート機能が無効になります(0番目から数えます)また、カンマで区切って複数指定も可能です。4/16番号とIDはクリックしてもソートしないのが確認できます。最初からソートした状態にしておくテーブルが最初に読み込まれた時はHTMLに書いてある順に表示されていますが、最初からソートした状態で画面を表示することもできます。0]]});sortListオプションで最初からソートしておく列(第1引数)と、昇順・降順(第2引数)を指定します。上の場合は第1引数が4なので、左から5列目(列は0番目から数えます)、つまり「誕生日」の列を指定しています。第2引数は昇順なら0、降順なら1を指定します。今回の場合なら左から5列目を昇順でソートしてある状態にしています。以下のテーブルはページが読み込まれた時から「誕生日」の列が昇順でソートされています。4/16また、最初からソートした状態にしたい列を[]内でカンマで区切れば複数指定することも可能です。0]]});この場合、左から3番目の列は降順、左から5番目の列は昇順でソートされた状態でページが読み込まれます。まとめHTMLテーブルにソート機能を追加するjQueryプラグイン「Tablesorter」を紹介しました。ソートてきるテーブルは使う側からしても使いやすいですからね。いうプラグインは割と少ない感じがするので、ソート機能が必要になった時に便利ですね。導入も簡単なのでぜひ使ってみてください。...jQueryjQueryのanimate()でbackgroundColorが動作しない理由と対策jQueryのanimate()を使ってbackgroundColorやcolorを変更しようとしてもできないという事態が起こると思います。そんな人のために今回はjQu...jQuery【初心者向け】プラグインなし!クリックで切り替わる基本的なタブの作り方【jQuery】タブは狭い画面に多くの情報を載せることができるので結構重宝します。今回はタブをクリックすると表示内容が切り替わる基本的なタブを作って...スポンサーリンクフリーランスのWebデザイナーとして初仕事したけどはてなブログproはメリットだらけ!収益化したいなら移行するしかないプロフィールwagashi2000年生まれ。大学を中退し、フリーランスのウェブデザイナーとして活動しています。寿司と桜が大好きだけど同調圧力が苦手。