JavaScript・テーブル・ページネーション

これまでバックエンド側でやってた処理を、
できるだけフロント側（js）で行いたいという事かな。

1 index.html
2 style.css
3 app.js
4 ページネーション
5 js処理の復習

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>  
  <link rel="stylesheet" href="style.css">
</head>
<body>
 
 <div id="maintable">
   
   <footer>
     <div id="paging">
       <table>
         <tr>
           <tb><button id="prevbtn" type="button"><</button></tb>
           <tb>
             <span id="currentpage">currentpage</span>
             /
             <span id="lastpage">lastpage</span>
           </tb>
           <tb><button id="nextbtn" type="button">></button></tb>
         </tr>
       </table>
     </div>
   </footer>
   
   <script src="app.js"></script>
   
 </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<table>

<tr>

<tb>

<span id="currentpage">currentpage</span>

<span id="lastpage">lastpage</span>

</tb>

</tr>

</table>

</div>

</footer>

</div>

</body>

</html>

style.css

#paging{
  text-align: center;
  
  /* スクロールに対してページネーションボックスの位置を指定 */
  position: fixed;
  
  bottom: 0;
  right: 45%;
}

#pagingbox{
  background: #fff;
}

th{
  /* ヘッダ背景塗り潰し */
  background: #eee;
}

th,td{
  /* 枠線を1本線指定 */
  border: solid 1px;
  width:  auto;
  padding: 2px;
  text-align: center;
}


table{
  /* 枠線を1本線指定 */
  border: solid 1px;
  border-collapse: collapse;
  white-space: nowrap;
}

footer{
  position: fixed;
  width: 100%;
  background-color: #c0c0c0;
  padding: 15px 0;
  /* 下に指定 */
  bottom: 0;
}

#paging{

text-align: center;

/* スクロールに対してページネーションボックスの位置を指定 */

position: fixed;

bottom: 0;

right: 45%;

}

#pagingbox{

background: #fff;

}

th{

/* ヘッダ背景塗り潰し */

background: #eee;

}

th,td{

/* 枠線を1本線指定 */

border: solid 1px;

width: auto;

padding: 2px;

text-align: center;

}

table{

/* 枠線を1本線指定 */

border: solid 1px;

border-collapse: collapse;

white-space: nowrap;

}

footer{

position: fixed;

width: 100%;

background-color: #c0c0c0;

padding: 15px 0;

/* 下に指定 */

bottom: 0;

}

app.js

// table要素を生成
var table = document.createElement('table');

// tr部分のループ
for (var i =0; i<700; i++){

  // tr要素を生成
  var tr = document.createElement('tr');

  // th;td部分のループ
  for (var j = 0; j < 20; j++){

    //１行目のtr要素の時
    if(i === 0){

      // th要素を生成
      var th = document.createElement('th');

      // th要素内にテキストを追加
      th.textContent = i + '-' + j;

      // th要素をtr要素の子要素に追加
      tr.appendChild(th);
    }else{

      // td要素を生成
      var td = document.createElement('td');

      // td要素内にテキストを追加
      td.textContent = i + '-' + j;

      // td要素をtr要素の子要素追加
      tr.appendChild(td);
    }
  }

  // tr要素をtable要素の子要素に追加
  table.appendChild(tr);

}
//生成したtable要素を追加する
document.getElementById('maintable').appendChild(table);


//ページング機能
$(function(){
  
  var page = 0;
  var displayrows = 20; //1ページ当たり表示する行の数
  
  //ページの表示
  function draw() {
    $('#lastpage').html(Math.ceil(($('tr').size()-1)/displayrows));
    $('#currentpage').html(page + 1);
    $('tr').hide();
    //　変数を使用する場合は' + + 'を忘れずに
    $('tr:first,tr:gt(' + page * displayrows + '):lt(' + displayrows + ')').show();
  }
  
  $('#prevbtn').click(function(){ //1ページ後進
    if(page > 0){
      page--;
      draw();
    }
  });
  
  $('#nextbtn').click(function(){
    if (page < ($('tr').size() - 1) /displayrows - 1){
      page++;
      draw();
    }
  });
  draw(); //初回表示
})

// table要素を生成

var table = document.createElement('table');

// tr部分のループ

for (var i =0; i<700; i++){

// tr要素を生成

var tr = document.createElement('tr');

// th;td部分のループ

for (var j = 0; j < 20; j++){

//１行目のtr要素の時

if(i === 0){

// th要素を生成

var th = document.createElement('th');

// th要素内にテキストを追加

th.textContent = i + '-' + j;

// th要素をtr要素の子要素に追加

tr.appendChild(th);

}else{

// td要素を生成

var td = document.createElement('td');

// td要素内にテキストを追加

td.textContent = i + '-' + j;

// td要素をtr要素の子要素追加

tr.appendChild(td);

}

// tr要素をtable要素の子要素に追加

table.appendChild(tr);

}

//生成したtable要素を追加する

document.getElementById('maintable').appendChild(table);

//ページング機能

$(function(){

var page = 0;

var displayrows = 20; //1ページ当たり表示する行の数

//ページの表示

function draw() {

$('#lastpage').html(Math.ceil(($('tr').size()-1)/displayrows));

$('#currentpage').html(page + 1);

$('tr').hide();

//　変数を使用する場合は' + + 'を忘れずに

$('tr:first,tr:gt(' + page * displayrows + '):lt(' + displayrows + ')').show();

}

$('#prevbtn').click(function(){ //1ページ後進

if(page > 0){

page--;

draw();

}

});

$('#nextbtn').click(function(){

if (page < ($('tr').size() - 1) /displayrows - 1){

page++;

draw();

}

});

draw(); //初回表示

})

ページネーション

プロモニスタ

ページネーションとは｜Web用語（意味・説明） | プロモニスタ

https://promonista.com/glossary/pagination/

ページネーションとは、長くなってしまった文章を複数のページに分割して、情報を読み取りやすくするナビゲーションのことを指します。ページネーションはニュースサイトや検索結果ページなど多くのウェブページで取り入れられています。画像のように、Googleの検索...

ページネーションとは、長くなってしまった文章を複数のページに分割して、情報を読み取りやすくするナビゲーションのことを指します。ページネーションとはページネーションはニュースサイトや検索結果ページなど多くのウェブページで取り入れられています。
●ページネーションの重要性
文章を読みやすくするうえでページネーションが重要な役割を担います。文章が長くてさらに画像が多い記事だとページの読み込みは遅くなり、ページが表示される前にユーザーが離脱してしまう比率が高まります。ユーザーが快適にページを閲覧するためにも、文章が長いページはページネーションの導入を考える必要があります。
●ページネーションの実装方法
かつてはhtmlとセッションで無理やり実装していたページネーションですが、様々なプラグインが配布されたことで比較的簡単に実装できるようになりました。中でもjQueryを使ったプラグインがメジャーで、様々なサイトから配布されています。

WebTecNote

[PHP] ページング機能の仕組みとか作り方とか - WebTecNote

https://tenderfeel.xsrv.jp/php/639/

初心者向けのページング（ページネーション）機能の作り方解説です。前後ページだけのリンクを表示する簡単なものと、ページ番号を表示する標準的なものの２タイプ紹介しています。サンプルソースと動作デモもあります。

●ページング機能で最低限必要な情報
ページ数とページ番号はカウントを０から始めるか１から始めるかで変わりますが、この記事では１から始める事を前提にして説明しています
①最大ページ数
（10ページまでなら10）
全部で何ページ必要かという意味です。最大ページ数は次の計算で求める事が出来ます。
「保存されている情報の総数　÷　１ページあたりに表示する情報の数」
1ページあたり8件にすると余りが出ますが、余りが出る場合はceilで繰り上げします。

②現在表示しているページのページ番号
（1ページ目を表示しているなら1）
現在表示しているページ番号は前や後ろのページに移動する度に変動するものなので、ページを移動する都度保存しなければなりません。オーソドックスなのはGET値ですが、その場合表示するリンクのURLにするだけで良いので簡単です。

キャバ嬢ITエンジニアのお金の稼ぎ方

【PHP】ページングの仕組み | キャバ嬢ITエンジニアのお金の稼ぎ方

http://webukatu.com/blogs/butterfly_engineer/2019/05/20/%E3%80%90php%E3%80%91%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF

今はウェブカツのWEBサービス部をやっていて、このレッスンではヤフオクのようなWEB上のフリーマケットサービスを模擬的に作っています。今回はそのレッスンの「ページネーション（ページング）」で学んだことを書きます！

●テーブルから10個ずつレコードを取り出したい場合
フリーマーケットのアプリとかだと、データベースに何個の商品が入っているかによって、何ページに渡って表示されるのか変わりますよね。メルカリだったら、「シャネル」って検索するとかなりの数の商品が表示されます。あれってデータベースから情報を取ってきているということなので、SQL文が必要になります。
例えば、productテーブルというテーブルがデータベースにあるとして、その中のレコードを10個ずつ取ってきてサイトには1ページにつき10個の商品を表示させたいときは下記のようなSQLになります。

SELECT * FROM product LIMIT 10 OFFSET 0

1	SELECT * FROM product LIMIT 10 OFFSET 0

（productテーブルの全てのレコードの0番目から10レコード分を取得してね。）
OFFSETが、「productテーブルの全てのレコードの0番目から」を表していて、LIMITが「何レコード分を取得すればいいか（データをいくつ取得すればいいか）」を表しています。
→レコードは「データ１つ分」「１データ」と考えればいい。

●ページングの仕組み
ページングでは、「今何ページ目なのか？」が重要で、ページを表示させるにはそのたびにSQLを変えていく必要があります。ページのkeyとしてpを使うとすると、「今何ページか？」はこうやって表示できます。

～/index.php?p=3

1	～/index.php?p=3

（?p=3が「今のページは３ページ目だよ」って教えてくれてますね。）
これをサーバー側でGETで取得してあげます

$page = $_GET[ 'p' ];

1	$page = $_GET[ 'p' ];

そのページ数を元にSQLを作る流れになります。

js処理の復習

侍エンジニア塾Blog

【JavaScript入門】はじめてのDOM操作・取得まとめ！ | 侍エンジニア塾ブログ（Sam...

https://www.sejuku.net/blog/25221

こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。今回は、JavaScriptでHTMLを操作するために欠かせない「DOM」について学習をしていきましょう。DOMを学ぶには「ツリー構造」の基本や「イベント処理」などについて学習することも非常に重要になっ...

HTML要素をJavaScriptから生成する方法について見ていきましょう！
最も簡単な方法としては「createElement()」メソッドを利用することです。記述方法としては、【 document.createElement( HTML要素 ) 】のように引数へ生成したいHTML要素を指定するだけです。

var pElement = document.createElement('p');

1	var pElement = document.createElement('p');

この例では、「createElement(‘p’)」と記述することで「p要素」を新規に生成して変数「pElement」に代入しています。あとは、JavaScript側で「pElement」を使ってp要素を自由に操作できるというわけです。
ただし、このままだとp要素はJavaScript内にだけ存在することになり画面に表示されることはありません。
次の章で解説する方法で、HTMLとしてDOMに追加しなくてはいけないのです！
●HTML要素を追加する方法
JavaScript側で生成したHTML要素をDOMに追加して画面に出力できるようにしましょう！そのために利用するメソッドとして「appnedChild()」があります。「appendChild()」を使うとJavaScript側で生成したHTML要素をDOMに追加して画面に出力できるようになります。

var p = document.createElement('p'); 
//テキストを追加する
p.textContent = 'これはサンプルです';
//body要素内にp要素を配置する
document.body.appendChild( p );

var p = document.createElement('p');

//テキストを追加する

p.textContent = 'これはサンプルです';

//body要素内にp要素を配置する

document.body.appendChild( p );

この例では、p要素を生成して「textContent()」メソッドでテキストを追加しています。そして、documentオブジェクトに続けて「body.appendChild( p )」と記述することでbody要素の中にp要素を配置することができます。

これはサンプルです

これによりDOMにp要素が追加されるので、画面にも生成したp要素が出力されるというわけです！

Qiita

【JavaScript】innerHTM、textContentの違い - Qiita

https://qiita.com/tomokichi_ruby/items/3640f0bc64ad6c676206

はじめに今回はinnerHTMLプロパティとtextContentプロパティの違いについて紹介します。両方ともJavaScriptの要素内のテキストにアクセスできるプロパティです！私はよくどっちがどっちだかわからなくなるの...

今回はinnerHTMLプロパティとtextContentプロパティの違いについて紹介します。両方ともJavaScriptの要素内のテキストにアクセスできるプロパティです！私はよくどっちがどっちだかわからなくなるので、ここでまとめておきます！
・innerHTML “HTMLを解釈して出力する”のがinnerHTMLです。
・textContent “HTMLを解釈せずにそのまま文字として出力する”のがtextContentです。

peeks-blog

基本、自分のために書いてるブログ。日々でそっとのぞいた、ちらっと見た物事の中から、自分が「これは！」と思った物事を備忘録としてまとめました。