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

2021.03.24
javascript
javascript

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

1. 環境
2. 値をソート
3. サンプルコード

環境

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

windows10にApacheのインストール

値をソート

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

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

<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>

<table>

<thead>

<tr>

<th class="sort" data-sort="id">アカウント</th>

</tr>

</thead>

<tr>

</tr>

<tr>

<td class="name">hanako</td>

</tr>

<tr>

<td class="name">yoshio</td>

</tr>

<tr>

<td class="name">atushi</td>

</tr>

<tr>

<td class="name">itiro</td>

</tr>

</tbody>

</table>

</div>

</div>

var options = {

valueNames: [ 'id', 'name']

};

var userList = new List('users', options);

// 初期状態はidで昇順ソートする

userList.sort( 'id', {order : 'asc' });

</script>

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

<input class="search" placeholder="Search" />

1	<input class="search" placeholder="Search" />

サンプルコード

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

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

<!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>