合計行を含んだHTMLテーブルをソートする

9938 ワード
QiitaAPI JavaScript sortable.js JavaScript テキストリンク

はじめに

・以前、JavaScriptで、DBにためている自分のQiitaのデータ（QiitaAPIにて取得）を「2軸グラフ」と「テーブル」に表示してみる、というを実施しました。（Qiita：Chart.jsを使用して複数軸のグラフを表示する(Javascript)）

・記事やデータもたまってきましたので、そこで作成していたテーブルをソートできるような機能をつけたいと思いました。

作成サイト

作成サイトはこちら

「Views」でソートした画面

ポイント

①Sorttableの使い方

基本は、以下のサイトを参考にさせていただきました。感謝。

Qiita：HTMLのtableをソートする方法

②テーブルデータの中に、HTMLタグも書ける

・テーブルデータにLINK設定などをしたいときは、どうするのか？と思っていたのですが、htmlのタグを書けばできることがわかりました。

sample.js
  //データ設定箇所
  var outdata = [];
  for(var i = 0; i < qiitadata.length; i++){

  // 本日日付になったら、格納処理
  if(qiitadata[i].setdate == hyphendate){

    var data = {
      no: (maxno + 1 - Number(qiitadata[i].no)),
      // タグも書ける
      title: '<a href="' + qiitadata[i].url + '" target="_blank">' + qiitadata[i].title + '</a>',
      views: Number(qiitadata[i].views),
      likes: Number(qiitadata[i].likes),
      stocks: Number(qiitadata[i].stocks),
      plike: Number(qiitadata[i].per_like),
      pstock: Number(qiitadata[i].per_stock),
    };

    outdata.push(data);

    // 合計の計算（カウントアップ）
    sum_view += Number(qiitadata[i].views);
    sum_like += Number(qiitadata[i].likes);
    sum_stock += Number(qiitadata[i].stocks);
  };
};

③合計行を含んだHTMLテーブルをソートするには

・テーブルに合計行がある場合は、合計行も一緒にソートされては具合が悪いです。どうすればいいのかよくわかりませんでしたが、いろいろ調べて試した結果、<tfoot></tfoot>の中にデータを出せば、合計行はソートされないことがわかりました。

sample.html
      <div class="container">
        <!-- テーブルヘッダ部分 -->
        <div id="result1"></div>
        <!-- テーブル部分 -->
        <div class="table sortable-table">
          <table id="outTable">
            <thead class="thead-light">
              <tr>
                <th scope="col" data-id="no">No</th>
                <th scope="col" data-id="title">タイトル</th>
                <th scope="col" data-id="views" sortable>VIEWS</th>
                <th scope="col" data-id="likes" sortable>LIKES</th>
                <th scope="col" data-id="stocks" sortable>STOCKS</th>
                <th scope="col" data-id="plike" sortable>LIKE率</th>
                <th scope="col" data-id="pstock" sortable>STOCK率</th>
              </tr>
            </thead>
            <!-- 合計行部分 -->
            <tfoot id="result2"></tfoot>
          </table>
        </div>
      </div>

まとめ

  • HTMLのテーブルでソートを簡単に実施することができました。
  • 合計行もソートに含めないやり方にモヤモヤしていたのですが簡単にできることがわかったのが、一番の発見でした。