質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • JavaScript

    20903questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 163

Otazoman

score 31

前提・実現したいこと

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

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

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で実現したいのですが
可能でしょうか。つたない説明ですいませんがよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+4

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/30 12:35

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

    キャンセル

  • 2019/01/30 12:37 編集

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

    キャンセル

  • 2019/01/30 17:07

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

    キャンセル

+2

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

自然の流れに逆らってるわけなので当然でしょう。
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ライブラリを探してるだけの人間や、
他人に作ってもらうばかりの人はプログラマとは呼びませんよ。
自称するなら頑張って実装してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

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

社名 点数
A 100
B 200

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

皆様ありがとうございました。
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 = "";
        }
    }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20903questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。