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

この記事は4分で読めます

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

index.html



style.css



app.js



ページネーション



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


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

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



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



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

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


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


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

js処理の復習



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


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


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

これはサンプルです

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


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




  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。