これまでバックエンド側でやってた処理を、
できるだけフロント側（js）で行いたいという事かな。
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!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> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
#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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
// 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(); //初回表示 }) |
ページネーション
プロモニスタページネーションとは、長くなってしまった文章を複数のページに分割して、情報を読み取りやすくするナビゲーションのことを指します。 ページネーションとは ページネーションはニュースサイトや検索結果ページなど多くのウェブページで取り入れられています。
●ページネーションの重要性
文章を読みやすくするうえでページネーションが重要な役割を担います。文章が長くてさらに画像が多い記事だとページの読み込みは遅くなり、ページが表示される前にユーザーが離脱してしまう比率が高まります。ユーザーが快適にページを閲覧するためにも、文章が長いページはページネーションの導入を考える必要があります。
●ページネーションの実装方法
かつてはhtmlとセッションで無理やり実装していたページネーションですが、様々なプラグインが配布されたことで比較的簡単に実装できるようになりました。中でもjQueryを使ったプラグインがメジャーで、様々なサイトから配布されています。
●ページング機能で最低限必要な情報
ページ数とページ番号はカウントを０から始めるか１から始めるかで変わりますが、この記事では１から始める事を前提にして説明しています
①最大ページ数
（10ページまでなら10）
全部で何ページ必要かという意味です。最大ページ数は次の計算で求める事が出来ます。
「保存されている情報の総数 ÷ １ページあたりに表示する情報の数」
1ページあたり8件にすると余りが出ますが、余りが出る場合はceilで繰り上げします。
②現在表示しているページのページ番号
（1ページ目を表示しているなら1）
現在表示しているページ番号は前や後ろのページに移動する度に変動するものなので、ページを移動する都度保存しなければなりません。オーソドックスなのはGET値ですが、その場合表示するリンクのURLにするだけで良いので簡単です。
●テーブルから10個ずつレコードを取り出したい場合
フリーマーケットのアプリとかだと、データベースに何個の商品が入っているかによって、何ページに渡って表示されるのか変わりますよね。メルカリだったら、「シャネル」って検索するとかなりの数の商品が表示されます。あれってデータベースから情報を取ってきているということなので、SQL文が必要になります。
例えば、productテーブルというテーブルがデータベースにあるとして、その中のレコードを10個ずつ取ってきてサイトには1ページにつき10個の商品を表示させたいときは下記のようなSQLになります。
|
1 |
SELECT * FROM product LIMIT 10 OFFSET 0 |
（productテーブルの全てのレコードの0番目から10レコード分を取得してね。）
OFFSETが、「productテーブルの全てのレコードの0番目から」を表していて、LIMITが「何レコード分を取得すればいいか（データをいくつ取得すればいいか）」を表しています。
→レコードは「データ１つ分」「１データ」と考えればいい。
●ページングの仕組み
ページングでは、「今何ページ目なのか？」が重要で、ページを表示させるにはそのたびにSQLを変えていく必要があります。ページのkeyとしてpを使うとすると、「今何ページか？」はこうやって表示できます。
|
1 |
～/index.php?p=3 |
（?p=3が「今のページは３ページ目だよ」って教えてくれてますね。）
これをサーバー側でGETで取得してあげます
|
1 |
$page = $_GET[ 'p' ]; |
そのページ数を元にSQLを作る流れになります。
js処理の復習
HTML要素をJavaScriptから生成する方法について見ていきましょう！
最も簡単な方法としては「createElement()」メソッドを利用することです。記述方法としては、【 document.createElement( HTML要素 ) 】のように引数へ生成したいHTML要素を指定するだけです。
|
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に追加して画面に出力できるようになります。
|
1 2 3 4 5 |
var p = document.createElement('p'); //テキストを追加する p.textContent = 'これはサンプルです'; //body要素内にp要素を配置する document.body.appendChild( p ); |
この例では、p要素を生成して「textContent()」メソッドでテキストを追加しています。そして、documentオブジェクトに続けて「body.appendChild( p )」と記述することでbody要素の中にp要素を配置することができます。
これはサンプルです
これによりDOMにp要素が追加されるので、画面にも生成したp要素が出力されるというわけです！今回はinnerHTMLプロパティとtextContentプロパティの違いについて紹介します。両方ともJavaScriptの要素内のテキストにアクセスできるプロパティです！私はよくどっちがどっちだかわからなくなるので、ここでまとめておきます！
・innerHTML “HTMLを解釈して出力する”のがinnerHTMLです。
・textContent “HTMLを解釈せずにそのまま文字として出力する”のがtextContentです。
この記事へのコメントはありません。