ci bootstrap paginate 페이징 처리

bootstrap 을 활용해 페이징처리 화면을 커스텀한다. 

https://wildflower282.tistory.com/19

ci paginate 페이징처리

위 링크와 같이 페이징 함수를 이용할 경우 다음과 같은 형태의 페이징 화면이 된다. 

이에 페이징 화면 커스텀을 활용하여 css 변경할 수 있다. 

 

1. default_full.php 활용

1.  Views/ 하단에 폴더 생성 
   ex) Pagers
2.  default_full.php 복사하여 생성한 폴더에 붙여넣고, 파일명을 변경해준다. 
   ex) Views/Pagers/test_pager.php
   * default_full.php 파일은 codeigniter4 프레임워크에 존재한다. 
   ex){Project Root}/vendor/codeigniter4/framework/system/Pager/Views
3. 복사 붙여넣기한 파일(test_pager.php)을 열어 css를 입혀준다. (bootstrap class 부여)
   <li class="page-item">,<li class="page-item active"> <a class="page-link">                                                                    bootstrap 에 따라 class명은 다를 수 있습니다.

<?php

use CodeIgniter\Pager\PagerRenderer;

/**
 * @var PagerRenderer $pager
 */
$pager->setSurroundCount(2);
?>

<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
	<ul class="pagination">
		<?php if ($pager->hasPrevious()) : ?>
			<li class="page-item">
				<a class="page-link" href="<?= $pager->getFirst() ?>" aria-label="<?= lang('Pager.first') ?>">
					<span aria-hidden="true"><?= lang('Pager.first') ?></span>
				</a>
			</li>
			<li class="page-item">
				<a class="page-link" href="<?= $pager->getPrevious() ?>" aria-label="<?= lang('Pager.previous') ?>">
					<span aria-hidden="true"><?= lang('Pager.previous') ?></span>
				</a>
			</li>
		<?php endif ?>

		<?php foreach ($pager->links() as $link) : ?>
			<li <?= $link['active'] ? 'class="page-item active"' : '' ?>>
				<a class="page-link" href="<?= $link['uri'] ?>">
					<?= $link['title'] ?>
				</a>
			</li>
		<?php endforeach ?>

		<?php if ($pager->hasNext()) : ?>
			<li class="page-item">
				<a class="page-link" href="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>">
					<span aria-hidden="true"><?= lang('Pager.next') ?></span>
				</a>
			</li>
			<li class="page-item">
				<a class="page-link" href="<?= $pager->getLast() ?>" aria-label="<?= lang('Pager.last') ?>">
					<span aria-hidden="true"><?= lang('Pager.last') ?></span>
				</a>
			</li>
		<?php endif ?>
	</ul>
</nav>

 

2. Pager에 등록

1) app/Config/Pager.php template에 추가
public $templates = [
        'default_full'   => 'CodeIgniter\Pager\Views\default_full',
        'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
        'default_head'   => 'CodeIgniter\Pager\Views\default_head',
        'test_pager'   => 'App\Views\Pagers\test_pager',
    ];

 

3. Model 

그룹명을 부여해준다. 

ex) paginate(10,'group1');

<?php

namespace App\Models;

use CodeIgniter\Model;

class PageModel extends Model {
    
    protected $table = 'TABLE'; 

    public function getData(){

        $this->builder() ->select('QUERY');
        $this->builder() ->where("조건필드","조건");
        $this->builder() ->orderBy("정렬","desc");

        return [
            'data'  => $this->paginate(10,'group1'),
            'pager' => $this->pager
        ];
    }
}

 

4. View

 그룹명 및 커스텀페이징 명을 추가한다. 

ex) $pager->links('group1','test_pager');

<div class="row">
  <div class='dataTables_paginate paging_simple_numbers' id="dataTable_paginate">
    <ul class='pagination' >
      <?php echo $pager->links('group1','test_pager');?>
    </ul>
  </div>
</div>