HTMLテーブルの列単位でページネーションをしたい

Question

前提・実現したいこと

テーブルを列単位でページネーションしたいと考えているのですが方法ありますでしょうか。調べてみて行単位ではページネーションする方法は多々あるのですが、列単位でページネーションする方法やライブラリというものがどうしても見つかりません。列単位でページネーションするのは無理なのでしょうか。

イメージとしては以下の様な感じです。

1ページ目
||1個目|2個目|3個目|
|:--|:--:|--:|
|社名|A社|B社|C社|
|点数|100点|95点|100点|

2ページ目
||4個目|5個目|6個目|
|:--|:--:|--:|
|社名|D社|E社|F社|
|点数|100点|100点|95点|

3ページ目

	7個目	8個目
社名	G社	H社
点数	100点	100点

<table id="compresult" border="1">
<thead>
<tr>
<td></td>
<th>1個目</th>
<th>2個目</th>
<th>3個目</th>
<th>4個目</th>
<th>5個目</th>
<th>6個目</th>
<th>7個目</th>
<th>8個目</th>
</thead>
<tbody>
<tr>
<td>社名</td>
<td>A社</td>
<td>B社</td>
<td>C社</td>
<td>D社</td>
<td>E社</td>
<td>F社</td>
<td>G社</td>
<td>H社</td>
</tr>
<td>点数</td>
<td>100点</td>
<td>95点</td>
<td>100点</td>
<td>100点</td>
<td>100点</td>
<td>95点</td>
<td>100点</td>
<td>100点</td>
</tr>
</tbody>
</table>

該当のソースコード

テーブル自体は以下の様にJavaScriptで出力しています。

var rs = '<table id="compresult" border="1">';
rs +='<thead><tr><td></td>'
for(var j=0;j<recCount;j++){
    rs +='<th>'
        + Number(j+1) +"個目"
        +'</th>';
}
rs +='</tr></thead><tbody>'

rs +='<tr><td>社名</td>'
for(var i=0;i<recCount;i++){
    rs +='<td>' + result.company_name[i] +'</td>';
}
rs +='</tr>';
rs +='<tr><td>点数</td>'
for(var i=0;i<recCount;i++){
    rs +='<td>' + result.item_name[i] +'</td>';
}
rs +='</tr>';
rs +='</tbody></table>';
document.getElementById('resultDisparea').innerHTML = rs;

補足情報（FW/ツールのバージョンなど）

できればライブラリ等読込まずに素のJavaScriptで実現したいのですが
可能でしょうか。つたない説明ですいませんがよろしくお願いいたします。

Answer 1

for(var i=0;i<recCount;i++)のi recCountページによって動かせばページングになりますね。

Comments

[Otazoman]

すいません、説明が不足していました。reCountで取り込んでいるデータについてはAPIでデータを抽出してきて、それを一旦、変数に保持しています。1ページごとにデータを抜いてこれないのと通信は1回ですまさないといけないという制約があるので、それを踏まえてどうすればいいかをご教示いただけるとありがたいです。

[kei344]

同じことです。
1ページに2件表示するなら2ページ目は
i=2;i<4
になるようにすれば良いだけですね。

[Otazoman]

ありがとうございます。開始位置と終了位置を動かしてページネーションするというイメージですね。考え方は理解できたのでそれを元に何とか頑張ってみます。ありがとうございました。

Answer 2

miyabi-sun様の回答を拝見して、質問への違和感が解消できたので、コメント的に(コメント欄に書いてスレッドを汚染した経験があるのでこちらに)

多分↓こういうデータ構造をしているべきなんじゃないのでしょうか。これなら、行をページネーションで欲しい結果が得られますよね。
従ってデータ構造から見直してください。

社名	点数
A	100
B	200

別回答で指摘されている、列をページネーションしたらデータの意味がなくなる、は、こういう姿をしているデータを基準に語られているはずで、そもそも行列が転置している質問者様の状況では、「「A社は100点」という情報は対であるべきです。」がうまく響いてない気がします

Answer 3

列単位でページネーションする方法やライブラリというものがどうしても見つかりません。

自然の流れに逆らってるわけなので当然でしょう。
https://kotobank.jp/word/%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89-9931

データベースを構成する基本単位のひとつで、複数のフィールドが集まって構成される1件分のデータのこと。行、データレコード、論理レコードとも呼ばれる。レコードの集まりがブロックで、ブロックの集まりがファイルである。

「A社は100点」という情報は対であるべきです。
この1セットになっている情報がレコードという概念なので、同じ行で示されるべきです。
点数というくくりでまとめ上げて、100,95,100...としたら、「この行が何を説明したのか意味不明」となるわけです。

これが自然の流れで世のデータベースやExcelの表はこれをベースに設計されたソフトウェアです。
単なる横と縦の2次元テーブルなだけじゃないんです。

---

列単位でページネーションするのは無理なのでしょうか。

上で説明しましたがライブラリを作る意味はないので、
探してもライブラリは見つかりはしないでしょう。

質問文のコードを関数で包んで実行し直すだけでしょ？
なんで作れないのかさっぱり理解できません。

多分ここで質問を繰り返しているだけだと無駄なので、
JavaScriptの書籍や初心者用サイト等で勉強し直して下さい。
1週間あれば作れるようになるはずです。

---

できればライブラリ等読込まずに素のJavaScriptで実現したいのですが可能でしょうか。

可能か不可能かで言えば当然可能ですが……

あぁ、rsという変数名で思い出しましたがteratailで他人に作ってもらったものでしたっけ？
プログラマというのはプログラミングをする人を指します。

自分で何も作らずjQueryライブラリを探してるだけの人間や、
他人に作ってもらうばかりの人はプログラマとは呼びませんよ。
自称するなら頑張って実装してください。

Answer 4

皆様ありがとうございました。
61件で16ページの時はきちんと動作して5件で2ページの時は少しおかしな動きをするので調査中ではありますが、ひとまず以下で何とか実現したいページネーションは何とか動きそうです。

～略～
var cd = document.getElementById('pagenation')
var pnum = 3;
if(recCount > pnum ){
    var nl = Math.ceil(recCount/pnum);
    var plink='';
    if(nl > 1){
        for(var i=0;i<nl;i++){
            plink +='<a href="#" onclick="displayMaker('+pnum+','+Number(i+1)+','+ recCount + ',' +recnum +');">'+  Number(i+1) + '</a>'+ "  "
        }
    }
    rcount = rcount + "  " + plink ;
}
cd.innerHTML = rcount;
document.getElementById('resultDisplayArea').innerHTML = rs;

//4列目以降は一旦非表示
for(var i = pnum; i<recCount;i++){
    document.getElementById('headerCol'+Number(i)).style.display = "none";
    for(var j=0;j<recnum;j++){
        document.getElementById('bodyCol'+Number(i)+"-"+Number(j)).style.display = "none";
    }
}

//ページネーション動作
function displayMaker(bnum,current,maxCnt,reccnt){
    var l = bnum*current;
    var f = Number(l)-bnum;
　　//一旦すべて非表示
    for(var i=0;i<maxCnt;i++){
        document.getElementById('headerCol'+Number(i)).style.display = "none";
        for(var j=0;j<reccnt;j++){
            document.getElementById('bodyCol'+Number(j)+"-"+Number(i)).style.display = "none";
        }
    }
    //必要箇所のみ表示
    for(var i=f;i<l;i++){
        document.getElementById('headerCol'+Number(i)).style.display = "";
        for(var j=0;j<reccnt;j++){
            document.getElementById('bodyCol'+Number(i)+"-"+Number(j)).style.display = "";
        }
    }
}

Answer 5

jQueryをつかってこんな感じで

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  var viewperpage=3;
  var currentpage=0;
  var results=[
    {"company_name":"A社","item_name":"100点"},
    {"company_name":"B社","item_name":"95点"},
    {"company_name":"C社","item_name":"100点"},
    {"company_name":"D社","item_name":"100点"},
    {"company_name":"E社","item_name":"100点"},
    {"company_name":"F社","item_name":"95点"},
    {"company_name":"G社","item_name":"100点"},
    {"company_name":"H社","item_name":"100点"},
   ];
  var lastpage=parseInt((results.length-1)/viewperpage);
  $('#current').val(currentpage+1).on('change',function(){
    currentpage=(parseInt($('#current').val())||1)-1;
    if(currentpage<0) currentpage=0;
    if(currentpage>lastpage) currentpage=lastpage;
    $('#current').val(currentpage+1);
    var offset=currentpage<lastpage?0:(viewperpage*(lastpage+1)-results.length);
    var tr=[
      $('<tr>').append($('<th></th>')),
      $('<tr>').append($('<td>社名</td>')),
      $('<tr>').append($('<td>点数</td>')),
      ];
    Array(viewperpage-offset).fill(null).forEach(function(x,y){
      tr[0].append($('<th>'+(y+1+currentpage*viewperpage)+'回目</th>'));
      tr[1].append($('<td>'+results[y+currentpage*viewperpage].company_name+'</td>'));
      tr[2].append($('<td>'+results[y+currentpage*viewperpage].item_name+'</td>'));
    });
    $('#compresult').find('thead').empty().append(tr[0]);
    $('#compresult').find('tbody').empty().append(tr[1],tr[2]);
  }).trigger('change');
  $('#prev').on('click',function(){
    if(currentpage>0) $('#current').val(currentpage).trigger('change');
  });
  $('#next').on('click',function(){
    if(currentpage<lastpage) $('#current').val(currentpage+2).trigger('change');
  });
  
});
</script>
<input type="button" value="&lt;" id="prev">
<input type="text" id="current" size="1">
<input type="button" value="&gt;" id="next">
<table id="compresult" border="1">
<thead></thead>
<tbody></tbody>
</table>