7
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CakePHP で可変なページネーションを実装する

Last updated at Posted at 2021-09-25

はじめに

SESの現場の中でページネーションの実装をしました。
その際、初めてsessionを使ったりajaxを使ったりしたのでこんなことしたっていう備忘録で
記事を作成しました。

処理の流れ

全体的な流れとしては以下の通りとなります。

セレクトボックス変更 => ajax呼び出し => コントローラー呼び出し =>  セッションに値を保存 => リロード

コード

変数$perPageにセッションで管理する値を持たせてます。それを三項演算子で判別して選択されるようにしています。

index.php
<?= $this->Form->create (null,[ "type" => "post"]); ?>
	<label>表示
	<select class="custom-select custom-select-sm form-control form-control-sm" style="width: 70px;" id="paginator-count">
    <?php 
    $perPage == 25 ? print '<option value="25" selected>25</option>' : print '<option value="25">25</option>';
     ?>
    <?php 
    $perPage == 50 ? print '<option value="50" selected>50</option>' : print '<option value="50">50</option>'; 
    ?>
    <?php 
    $perPage == 100 ? print '<option value="100" selected>100</option>' : print '<option value="100">100</option>';     
    ?>
	</select></label>
<?= $this->Form->end(); ?>
sample.js
/**************************************
 * ページネーション切り替え処理
 **************************************/
$(document).ready(function()
{
    /* URLのパラメーターを受け取る */
	function getParam(name, url) {
	    if (!url) url = window.location.href;
	    name = name.replace(/[\[\]]/g, "\\$&");
	    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
	        results = regex.exec(url);
	    if (!results) return null;
	    if (!results[2]) return '';
	    return decodeURIComponent(results[2].replace(/\+/g, " "));
	}

    /* 画面をリロードさせるメソッド */
	function doReload() {
    	window.location.reload(true);
	}

    /**
     * セレクトボックスの変更
     */
    $('#paginator-count').change(function()
    {
        var data = { request : $('#paginator-count').val() };
        var userid = getParam('userid');
        const _csrfToken = $('input[name="_csrfToken"]').val();

        /**
         * Ajax通信メソッド
         * @param type  : HTTP通信の種類
         * @param url   : リクエスト送信先のURL
         * @param data  : サーバに送信する値
         */
        $.ajax({
            type: 'POST',
            datatype:'json',
            url: "/domain/controller/changePaginate",
            data: {
                data: data,
                userid: userid,
                _csrfToken: _csrfToken
            },
            beforeSend: function(xhr){
                xhr.setRequestHeader("X-CSRF-Token",_csrfToken);
            },
        })
        .done((data, textStatus, jqXHR) => {
        	doReload(); // 通信成功したときにリロードさせることで反映させる
	        console.log('通信成功');
        })
        .fail((jqXHR, textStatus, errorThrown) => {
            console.log('通信失敗');
        });
        return false;
    });
});
SampleController.php
/**
 * 一覧表示
 */
public function index(){
    //ページネーションのセッション管理
    $session = $this->getRequest()->getSession(); 
    $this->paginate['limit'] = $session->read('paginate'); //paginateと命名したセッションの値を読み込む
    $perPage = $this->paginate['limit']; // 変数にセッションの値を代入
    $this->set('perPage', $perPage);
}

/**
 * ページネーションの切り替えメソッド
 */
public function changePaginate()
{
    $request = $this->getRequest();  // ajaxでjavascriptからもらったdataとuseridを受け取る
    $paginateCount = $request->getData('data')['request']; // data(セレクトボックスの値)

    // 取得した件数をセッションに保存
    $session = $this->getRequest()->getSession(); 
    $session->write('paginate', $paginateCount); // セッションにセレクトボックスの値を保持させる

    $userid = $request->getData('userid'); // ajaxで受け取ったuserid
}

とりあえずこんな感じでセレクトボックスの値を変えたら表示件数が変わるやつが実装できました。
まだ経験浅いので、有識者の方、良い方法あれば教えてください!

7
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?