表の昇順降順を簡単に追加できるList.js

みなさんこんにちは。

最近になって、表組みの並び替えがしたいという依頼があり、今更ですがList.jsを使ったので、自分のメモついでの記事となります。
これは、仕事の依頼で使う可能性は高いと思いますし、商品レビューなどの記事を書くときにも非常にオススメできます。

例えば…

CPUの性能一覧とか？、めっちゃ長くなるじゃないですか。その性能や価格、対応規格などでソートできるようにすると、読み手も上下いったりきたりしなくていいですね。

表のボリュームが多くなればなるほど、このList.jsが生きてきます。

それでは、早速みていきましょう。

List.jsの全体のコードを掲載しておきます

これは、メモの意味合いも高い記事で、ここにきたユーザーもコピペできればいいと思いますので、さっそく掲載しておきますね。

自由にお使いください！

See the Pen
List.js by yoshioimagawa (@Yopps)
on CodePen.

「th」で囲っているところに、表の項目ごとのタイトル

「td」にそれぞれの内容をいれていきましょう。

そうすると「th」部分をクリックすると並び替えできるようになります。

list.jsのスクリプトファイルは以下からダウンロードできます。

ですが、ダウンロードしてわざわざ自分のサイトへ設置も面倒かとおもいますので、以下を貼り付けてください。

List.js CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

表とは別にボタンを配置してボタンで並び替えもできます。
以下参考コード

See the Pen
VwvpBMP by yoshioimagawa (@Yopps)
on CodePen.

とりあえず、以上になります。

list.jsファイルは、毎度読み込むのは面倒なので、サイトの共通部分に貼り付けておくとよいでしょう。

合わせて読みたい