소개

・이전, JavaScript로, DB에 하고 있는 자신의 Qiita의 데이터(QiitaAPI로 취득)를 「2축 그래프」와 「테이블」에 표시해 본다고 하는 것을 실시했습니다. (Qiita: Chart.js를 사용하여 다중 축 그래프 표시 (Javascript) )

・기사나 데이터도 쌓여 왔으므로, 거기서 작성하고 있던 테이블을 정렬할 수 있는 기능을 붙이고 싶었습니다.

작성 사이트

작성 사이트는 이쪽



'Views'로 정렬한 화면

포인트

①Sorttable의 사용법

기본은, 이하의 사이트를 참고로 했습니다. 감사.

Qiita : HTML 테이블을 정렬하는 방법

②테이블 데이터 안에 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 테이블에서 정렬을 쉽게 수행할 수 있습니다.

합계행도 소트에 포함하지 않는 방식으로 모야모야 하고 있었습니다만 간단하게 할 수 있는 것을 알았던 것이, 제일의 발견이었습니다.