javascript テーブルをソート及び検索する

javascript テーブルをソート及び検索する

javascriptで、テーブルをソート及び検索するサンプルコードを記述してます。ここでは「list.js」を使用してソートしてます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

値をソート

テーブルの値をカラムごとにソートするには「list.js」が非常に便利で使い方も簡単です。

以下のように、idとclassとdata-sortを付与するだけでソートが可能になります。

検索に関しても、以下を追加するだけです。

サンプルコード

以下は、
「list.js」を使用してテーブルをソートするサンプルコードとなります。

※cssには「tailwind」を使用してます。

実行結果をみるとソートされていることが確認できます。