Written by Manabu Bannai

【CodeIgniter】ページネーション機能を実装する方法

CodeIgniter PROGRAMMING

CodeIgniterでページネーションを実装する方法です。
完成図は以下となります。

pagination_done
※スタイルはかなり適当です笑

もくじ

  1. CodeIgniterの初期設定
  2. ページネーションを利用するためのコントローラーを作成する
  3. HTMLテーブルクラスを利用する

それではまとめていきます。

1.CodeIgniterの初期設定

DBの作成

DB名:ci_site
テーブル名:table
カラム数:3
∟ id, title, content

※データは20個ほど用意しました。
pagination_data_table01

pagination_data_table02

オートロード設定を行なう

編集ファイル:application/config/autoload.php


// $autoload['libraries'] = array();
$autoload['libraries'] = array("database");

// $autoload['helper'] = array();
$autoload['helper'] = array("url");

ベースURLの設定

編集ファイル:application/config/config.php


// $config['base_url']	= 'http://localhost/pagination/';
$config['base_url']	= '';

当記事では、CodeIgniterのフォルダ名を『pagination』としています。

データベースのコネクション設定をする

編集ファイル:application/config/database.php


$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = 'root';
$db['default']['database'] = 'ci_site';

2.ページネーションを利用するためのコントローラーを作成する

デフォルトコントローラーを設定する

編集ファイル:application/config/routes.php


// $route['default_controller'] = "welcome";
$route['default_controller'] = "site";

それでは、siteコントローラーを作っていきます。

siteコントローラーを作成して、ページネーションライブラリを読み込む

新規作成ファイル:application/controller/site.php


load->library("pagination");
	}
}

サイトコントローラー利用時のベースURL設定をする

編集ファイル:application/controller/site.php


function index(){
	$this->load->library("pagination");

	// ページネーション処理が含まれるコントローラクラス/ メソッドへの完全な URL
	// http://localhost/pagination/index.php/site/index
	// /http://localhost/pagination/index.php/コントローラー名/ファンクション名
	$config["base_url"] = "http://localhost/pagination/index.php/site/index";
}

ページネーション処理に必要な情報をconfigに格納し、イニシャライズする

編集ファイル:application/controller/site.php


// データベースから合計の行数を取得する
$config["total_rows"] = $this->db->get("data")->num_rows();

// 1ページにいくつの記事を表示するか設定する
$config["per_page"] = 3;

// 選択中のページ番号の前後に表示したい "数字" リンクの数。
// たとえば、3を指定すると、 次の写真ように、現在のページのページ番号の両脇に3つの番号リンクが置かれます。
$config["num_links"] = 3;

$this->pagination->initialize($config);

num_links

記事を出力するためのデータをGETする

編集ファイル:application/controller/site.php


// get("①", "②", "③")
// ①テーブル名
// ②引っ張るデータの数
// ③オフセット(※あとで解説します)
$data["records"] = $this->db->get("data", $config["per_page"], $this->uri->segment(3));

$this->load->view("site_view", $data);

最後にsite_viewにデータをわたしています。

ここでページをロードすると以下のエラーメッセージがでてきます。

An Error Was Encountered
Unable to load the requested file: site_view.php

それでは、site_viewを作っていきます。

site_viewを作成する

新規作成ファイル:application/views/site_view.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
</head>
<body>
<div id="container">
<h1>ページネーションの作成</h1>

<?php

	echo $this->pagination->create_links();

?>

</div>
</body>
</html>

これでページネーションリンクが完成します。
1から順番にリンクをクリックしてみてください。
以下のように変化するはずです。

http://localhost/pagination/index.php/site/index/
http://localhost/pagination/index.php/site/index/3
http://localhost/pagination/index.php/site/index/6
http://localhost/pagination/index.php/site/index/9
….etc

たとえば、

http://localhost/pagination/index.php/site/index/3

上記のURLはデータベースのカラムから情報を引っ張った際に、『最初の3行は無視すること』を意味しています。
先ほど、以下のコードでそのように設定したためです。

// 1ページにいくつの記事を表示するか設定する
$config["per_page"] = 3;

また、以下のコードのオフセット部分

$data["records"] = $this->db->get("data", $config["per_page"], $this->uri->segment(3));

セグメント3とは以下のURLの『3』の部分をさしています。
/site/index/3

これを第3セグメントといいます。

今回のページネーションでは、第3引数が変化することにより、ページネーションを実現しています。よって、オフセットは3と設定しました。

つぎに、DBから情報を引っ張り、ページに表示していきます。
その際に、HTMLテーブルクラスが便利です。

3.HTMLテーブルクラスを利用する

HTMLテーブルライブラリを読み込む

編集ファイル:application/controller/site.php

function index(){
	$this->load->library("pagination");
	$this->load->library("table");

generateメソッドを利用する

編集ファイル:application/views/site_view.php

// site.phpで $data["records"]で情報を取得したことを思い出してください。
echo $this->table->generate($records);
echo $this->pagination->create_links();

たったこれだけ!
ページネーションがすでに完成しています。
pagination_done

さいごに、、、。

写真をみてお分かりの通り、テーブルのヘッダー部分がださいです。
そこだけ修正してしまいましょう。

編集ファイル:application/controller/site.php

function index(){
	$this->load->library("pagination");
	$this->load->library("table");

	$this->table->set_heading("番号", "タイトル", "内容");

これできれいになりました。
pagination_done_clear

以上となります。
コードはgithubで公開しています。
manabubannai/Pagination

photo credit: Skyline-Photo via photopin cc

人気記事:Web制作の独学方法をガッツリまとめました。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

おすすめ:Webで稼ぎたいなら、Webマーケティングを学びましょう。ノウハウまとめました。

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。