+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Development (https://forum.codeigniter.com/forumdisplay.php?fid=6)
+--- Forum: CodeIgniter 3.x (https://forum.codeigniter.com/forumdisplay.php?fid=17)
+--- Thread: How do I replace the default pagination with a pager? (/showthread.php?tid=80210)
How do I replace the default pagination with a pager? - Ajax30 - 09-28-2021
I am working on an online newspaper/blogging application (link to GitHub repo) with CodeIgniter 3.1.8 and Twitter Bootstrap 4.
The application has themes. One of the themes uses a pager instead of pagination, so the Codeigniter default pagination is not well suited for it.
The "hack" I found for this problem relies on CSS.
In the Posts controller I have:
Code:
class Posts extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
private function _initPagination($path, $totalRows, $query_string_segment = 'page')
{
//load and configure pagination
$this->load->library('pagination');
$config['base_url'] = base_url($path);
$config['query_string_segment'] = $query_string_segment;
$config['enable_query_strings'] = TRUE;
$config['reuse_query_string'] = TRUE;
$config['total_rows'] = $totalRows;
$config['per_page'] = 12;
if (!isset($_GET[$config['query_string_segment']]) || $_GET[$config['query_string_segment']] < 1) {
$_GET[$config['query_string_segment']] = 1;
}
$this->pagination->initialize($config);
$limit = $config['per_page'];
$offset = ($this->input->get($config['query_string_segment']) - 1) * $limit;
return array(
'limit' => $limit,
'offset' => $offset
);
}
public function index()
{
//call initialization method
$config = $this->_initPagination("/", $this->Posts_model->get_num_rows());
$data = $this->Static_model->get_static_data();
$data['base_url'] = base_url("/");
$data['pages'] = $this->Pages_model->get_pages();
$data['categories'] = $this->Categories_model->get_categories();
$data['search_errors'] = validation_errors();
//use limit and offset returned by _initPaginator method
$data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);
$this->twig->addGlobal('pagination', $this->pagination->create_links());
// featured posts
if ($data['is_featured']) {
$data['featured'] = $this->Posts_model->featured_posts();
$this->twig->addGlobal('featuredPosts', "themes/{$data['theme_directory']}/partials/hero.twig");
}
$this->twig->display("themes/{$data['theme_directory']}/layout", $data);
}
public function search()
{
// Force validation since the form's method is GET
$this->form_validation->set_data($this->input->get());
$this->form_validation->set_rules('search', 'search term', 'required|trim|min_length[3]', array(
'min_length' => 'The search term must be at least 3 characters long.'
));
$this->form_validation->set_error_delimiters('<p class = "error search-error">', '</p>');
// If search fails
if ($this->form_validation->run() === FALSE) {
$data['search_errors'] = validation_errors();
return $this->index();
} else {
$expression = $this->input->get('search');
$posts_count = $this->Posts_model->search_count($expression);
$query_string_segment = 'page';
$config = $this->_initPagination("/posts/search", $posts_count, $query_string_segment);
$data = $this->Static_model->get_static_data();
$data['base_url'] = base_url("/");
$data['pages'] = $this->Pages_model->get_pages();
$data['categories'] = $this->Categories_model->get_categories();
//use limit and offset returned by _initPaginator method
$data['posts'] = $this->Posts_model->search($expression, $config['limit'], $config['offset']);
$data['expression'] = $expression;
$data['posts_count'] = $posts_count;
$this->twig->addGlobal('pagination', $this->pagination->create_links());
$this->twig->display("themes/{$data['theme_directory']}/layout", $data);
}
}Code:
.pagination li:first-child {
display: inline-block;
margin-right: auto;
}
.pagination li.active + li {
display: inline-block;
margin-left: auto;
}
.pagination li,
.pagination li.active {
display: none;
position: relative;
}
.pagination li:first-child a::before,
.pagination li.active + li a::before {
display: inline-block;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #0085a1;
border: 1px solid #006d83;
color: #fff;
font-size: 14px;
font-weight: 800;
padding: 15px 25px;
letter-spacing: 1px;
text-transform: uppercase;
}
.pagination li:first-child a::before {
content: 'Newer Posts';
padding-left: 35px;
}
.pagination li.active + li a::before {
content: 'Older Posts';
padding-right: 35px;
}
.pagination li:first-child a::after,
.pagination li.active + li a::after {
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pagination li:first-child a::after {
content: '\2190';
left: 7px;
}
.pagination li.active + li a::after {
content: '\1F812';
right: 7px;
}The problem with this approach is that it is inconsistent: when I am on the last page, the "Newer Posts" button is linked to the first page instead of the previous.
Question:
Is there a more reliable way to add a pager option?
RE: How do I replace the default pagination with a pager? - InsiteFX - 09-29-2021
You can take a look at this, you will need to modify it to work wit CodeIgniter but all code is there.
How to create Pagination with PHP
It only displays the Prev and Next buttons.
RE: How do I replace the default pagination with a pager? - InsiteFX - 09-30-2021
Sorry, I just remembered that I had created a Bootstrap bs_simple.php Pager template for it
Here are the templates for bootstrap. You will need to configure then in the app/Config/Pager.php file.
PHP Code:
<?php
/**
* ./app/Views/Pager/bs_full.php
* Bootstrap 4 or 5 Pager Template.
* Renders the full Bootstrap pager links
*
* @var PagerRenderer $pager
*/
use CodeIgniter\Pager\PagerRenderer;
$pager->setSurroundCount(2);
?>
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
<ul class="pager pagination justify-content-center">
<?php if ($pager->hasPreviousPage()) : ?>
<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->getPreviousPage() ?>" 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->hasNextPage()) : ?>
<li class="page-item">
<a class="page-link" href="<?= $pager->getNextPage() ?>" 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>
// -----------------------------------------------------------------------------------------------------------
<?php
/**
* ./app/Views/Pager/bs_simple.php
* Bootstrap 4 or 5 Pager Template.
* Renders just the Previous and Next link buttons.
*
* @var PagerRenderer $pager
*/
use CodeIgniter\Pager\PagerRenderer;
$pager->setSurroundCount(0);
?>
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
<ul class="pager pagination justify-content-center">
<li <?= $pager->hasPrevious() ? 'class="page-item active"' : 'class="page-item disabled"' ?>>
<a class="page-link" href="<?= $pager->getPrevious() ?? '#' ?>" aria-label="<?= lang('Pager.previous') ?>">
<span aria-hidden="true"><?= lang('Pager.newer') ?></span>
</a>
</li>
<li <?= $pager->hasNext() ? 'class="page-item active"' : 'class="page-item disabled"' ?>>
<a class="page-link" href="<?= $pager->getnext() ?? '#' ?>" aria-label="<?= lang('Pager.next') ?>">
<span aria-hidden="true"><?= lang('Pager.older') ?></span>
</a>
</li>
</ul>
</nav>