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

javascriptで、テーブルをソート及び検索するサンプルコードを記述してます。ここでは「list.js」を使用してソートしてます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
値をソート
テーブルの値をカラムごとにソートするには「list.js」が非常に便利で使い方も簡単です。
以下のように、idとclassとdata-sortを付与するだけでソートが可能になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<div id="users"> <table> <thead> <tr> <th class="sort" data-sort="id">アカウント</th> <th class="sort" data-sort="name">名前</th> </tr> </thead> <tbody class="list"> <tr> <td class="id">5</td> <td class="name">taro</td> </tr> <tr> <td class="id">2</td> <td class="name">hanako</td> </tr> <tr> <td class="id">1</td> <td class="name">yoshio</td> </tr> <tr> <td class="id">4</td> <td class="name">atushi</td> </tr> <tr> <td class="id">3</td> <td class="name">itiro</td> </tr> </tbody> </table> </div> <!-- End Recent Sales --> </div> <!-- end content --> <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> <script> var options = { valueNames: [ 'id', 'name'] }; var userList = new List('users', options); // 初期状態はidで昇順ソートする userList.sort( 'id', {order : 'asc' }); </script> |
検索に関しても、以下を追加するだけです。
1 |
<input class="search" placeholder="Search" /> |
サンプルコード
以下は、
「list.js」を使用してテーブルをソートするサンプルコードとなります。
※cssには「tailwind」を使用してます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="keywords" content="mebee,test" /> <meta name="description" content="mebeeのtestページ" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <title>mebeeサンプル</title> </head> <style> #wrap { width: 250px; margin-top: 250px; margin-right: auto; margin-left: auto; } .sort.desc:after { content: "▼"; } .sort.asc:after { content: "▲"; } </style> <body id="wrap"> <div id="users" class="bg-gray-100 flex-1 p-6 md:mt-16"> <input class="search p-3 flex-1" placeholder="Search" /> <table class="table-auto w-full text-left"> <thead> <tr> <th class="sort px-4 py-2 border-r" data-sort="id">アカウント</th> <th class="sort px-4 py-2 border-r" data-sort="name">名前</th> </tr> </thead> <tbody class="list text-gray-600"> <tr> <td class="id border border-l-0 px-4 py-2">5</td> <td class="name border border-l-0 px-4 py-2">taro</td> </tr> <tr> <td class="id border border-l-0 px-4 py-2">2</td> <td class="name border border-l-0 px-4 py-2">hanako</td> </tr> <tr> <td class="id border border-l-0 px-4 py-2">1</td> <td class="name border border-l-0 px-4 py-2">yoshio</td> </tr> <tr> <td class="id border border-l-0 px-4 py-2">4</td> <td class="name border border-l-0 px-4 py-2">atushi</td> </tr> <tr> <td class="id border border-l-0 px-4 py-2">3</td> <td class="name border border-l-0 px-4 py-2">itiro</td> </tr> </tbody> </table> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> <script> var options = { valueNames: ['id', 'name'] }; var userList = new List('users', options); userList.sort('id', { order: 'asc' }); </script> |
実行結果をみるとソートされていることが確認できます。

-
前の記事
rails6 LDAPで取得したデータを表示する 2021.03.24
-
次の記事
python openpyxlエラー「DeprecationWarning: Call to deprecated function get_sheet_names (Use wb.sheetnames)」の対処法 2021.03.24
コメントを書く