DEV Community: sunakshi Thakur

CodeIgniter 4 Pagination — Custom Styling with Bootstrap 5

sunakshi Thakur — Fri, 26 Jun 2026 13:38:55 +0000

Difficulty: Beginner–Intermediate | Read time: 10 min | Framework: CodeIgniter 4

The Problem with Default CI4 Pagination

CodeIgniter 4 has built-in pagination — but the default output looks nothing like Bootstrap 5. You get plain links with no styling, no active states, no prev/next arrows.

In every real project I've worked on, I end up customizing it. This tutorial shows you exactly how — from basic setup to a fully styled Bootstrap 5 paginator with AJAX support.

What we're building: A paginated list of records styled with Bootstrap 5, with custom prev/next buttons, active page highlighting, and optional AJAX loading.

Basic Setup First

Let's say you have a products table and want to paginate results.

1. The Model

<?php
// app/Models/ProductModel.php
namespace App\Models;

use CodeIgniter\Model;

class ProductModel extends Model
{
    protected $table      = 'products';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name', 'price', 'category', 'created_at'];

    public function getProducts(int $perPage = 10): array
    {
        return $this->paginate($perPage);
    }
}

2. The Controller

<?php
// app/Controllers/Products.php
namespace App\Controllers;

use App\Models\ProductModel;

class Products extends BaseController
{
    public function index(): string
    {
        $model   = new ProductModel();
        $perPage = 10;

        $data['products'] = $model->getProducts($perPage);
        $data['pager']    = $model->pager;
        $data['perPage']  = $perPage;

        return view('products/index', $data);
    }
}

3. Basic View (before styling)

<!-- app/Views/products/index.php -->
<?php foreach ($products as $product): ?>
    <div><?= esc($product['name']) ?> — ₹<?= $product['price'] ?></div>
<?php endforeach; ?>

<!-- Default pagination (unstyled) -->
<?= $pager->links() ?>

This works — but looks terrible. Let's fix that.

Custom Bootstrap 5 Pagination Template

CI4 lets you create a custom pagination template. This is the proper way to style it.

Step 1 — Create the template file

<!-- app/Views/pager/bootstrap_5.php -->
<?php $pager->setSurroundCount(2) ?>

<nav aria-label="Page navigation">
  <ul class="pagination justify-content-center mb-0">

    <?php if ($pager->hasPreviousPage()): ?>
      <li class="page-item">
        <a class="page-link" href="<?= $pager->getPreviousPageURI() ?>" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
    <?php else: ?>
      <li class="page-item disabled">
        <span class="page-link">&laquo;</span>
      </li>
    <?php endif ?>

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

    <?php if ($pager->hasNextPage()): ?>
      <li class="page-item">
        <a class="page-link" href="<?= $pager->getNextPageURI() ?>" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    <?php else: ?>
      <li class="page-item disabled">
        <span class="page-link">&raquo;</span>
      </li>
    <?php endif ?>

  </ul>
</nav>

Step 2 — Register the template in config

// app/Config/Pager.php
public array $templates = [
    'default_full'   => 'CodeIgniter\Pager\Views\default_full',
    'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
    'bootstrap_5'    => 'App\Views\pager\bootstrap_5',  // <-- add this line
];

Step 3 — Use it in your view

<!-- Now use your custom template -->
<?= $pager->links('default', 'bootstrap_5') ?>

That's it — fully Bootstrap 5 styled pagination! ✅

Extra Styling — Make It Look Even Better

Add this CSS to make the active page and hover states pop:

/* Custom pagination styling */
.pagination .page-link {
    color: #6610f2;
    border-color: #dee2e6;
    padding: 8px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pagination .page-item.active .page-link {
    background-color: #6610f2;
    border-color: #6610f2;
    color: #fff;
}

.pagination .page-link:hover {
    background-color: #f0ebff;
    color: #6610f2;
    border-color: #6610f2;
}

.pagination .page-item.disabled .page-link {
    color: #adb5bd;
    pointer-events: none;
}

Show Record Count (Very Useful in Real Projects)

Users want to know "Showing 1–10 of 154 records". Here's how:

// In your controller — add these to $data
$data['total']       = $model->countAllResults();
$data['currentPage'] = $model->pager->getCurrentPage();
$data['perPage']     = $perPage;

<!-- In your view -->
<?php
  $start = (($currentPage - 1) * $perPage) + 1;
  $end   = min($currentPage * $perPage, $total);
?>

<div class="d-flex justify-content-between align-items-center mb-3">
    <small class="text-muted">
        Showing <?= $start ?>–<?= $end ?> of <?= $total ?> records
    </small>
    <?= $pager->links('default', 'bootstrap_5') ?>
</div>

Output: Showing 1–10 of 154 records with pagination on the right. Clean and professional!

AJAX Pagination (No Page Reload)

For a smoother experience, load pages via AJAX:

<!-- In your view -->
<div id="products-wrapper">
    <?= view('products/_table', ['products' => $products]) ?>
</div>

<div id="pagination-wrapper">
    <?= $pager->links('default', 'bootstrap_5') ?>
</div>

<script>
$(document).on('click', '#pagination-wrapper .page-link', function (e) {
    e.preventDefault();

    const url = $(this).attr('href');
    if (!url || url === '#') return;

    $.get(url, function (response) {
        const html    = $(response);
        $('#products-wrapper').html(html.find('#products-wrapper').html());
        $('#pagination-wrapper').html(html.find('#pagination-wrapper').html());

        // Scroll to top of table smoothly
        $('html, body').animate({ scrollTop: $('#products-wrapper').offset().top - 80 }, 300);
    });
});
</script>

Common Pitfalls

⚠️ 1. Pagination not working with WHERE filters

If you apply filters before paginate(), always use $model->where() before calling it:

// WRONG — filter applied after, pagination counts wrong
$data['products'] = $model->paginate($perPage);
$model->where('category', 'electronics');

// CORRECT — filter first, then paginate
$data['products'] = $model->where('category', $category)
                           ->paginate($perPage);
$data['pager'] = $model->pager;

⚠️ 2. Template not found error

Make sure the path in Pager.php config matches exactly:

'bootstrap_5' => 'App\Views\pager\bootstrap_5'
// File must be at: app/Views/pager/bootstrap_5.php

⚠️ 3. Page resets to 1 on form submit

When using search + pagination together, pass the current page in your form:

<input type="hidden" name="page" value="<?= $currentPage ?>">

And in controller:

$page = $this->request->getGet('page') ?? 1;
$data['products'] = $model->where('name LIKE', "%{$search}%")
                           ->paginate($perPage, 'default', $page);

Full Working Example — Products Page

Here's everything together in one clean view:

<!-- app/Views/products/index.php -->
<div class="container py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Products</h4>
        <small class="text-muted">
            Showing <?= $start ?>–<?= $end ?> of <?= $total ?> records
        </small>
    </div>

    <div class="table-responsive" id="products-wrapper">
        <table class="table table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Product Name</th>
                    <th>Category</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($products as $p): ?>
                <tr>
                    <td><?= $p['id'] ?></td>
                    <td><?= esc($p['name']) ?></td>
                    <td><span class="badge bg-secondary"><?= esc($p['category']) ?></span></td>
                    <td>₹<?= number_format($p['price'], 2) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <div id="pagination-wrapper" class="mt-3">
        <?= $pager->links('default', 'bootstrap_5') ?>
    </div>

</div>

Conclusion

CI4's pagination is powerful once you know how to configure it. A custom Bootstrap 5 template + the record count display makes your app look polished and professional — exactly what clients expect.

Follow me for more CodeIgniter production tutorials — 3 new articles every week. 🙌

Senior PHP Developer · 12+ years building production systems on CodeIgniter, Laravel & WordPress

How to Build a Support Ticket System in CodeIgniter 4 — With Role-Based Visibility and Email Notifications

sunakshi Thakur — Fri, 26 Jun 2026 13:08:02 +0000

Difficulty: Intermediate | Read time: 12 min | Framework: CodeIgniter 4

Why Build This?

Most tutorials show you CRUD forms. But real client projects need more — things like:

Tickets visible only to the right people (admin vs staff vs customer)
Auto-assigning tickets to staff and notifying them by email
Status history so you can audit what happened and when

I built exactly this for an internal CRM at my company. This tutorial walks you through the key parts so you can adapt it to your own projects.

What we're building: A ticket module where non-admin users only see tickets assigned to them, admins see everything, and staff get an email when assigned.

Database Structure

Start with two tables — tickets and a status history log.

CREATE TABLE `tblsupport_tickets` (
  `id`          INT AUTO_INCREMENT PRIMARY KEY,
  `subject`     VARCHAR(255) NOT NULL,
  `description` TEXT,
  `status`      ENUM('open','in_progress','resolved','closed') DEFAULT 'open',
  `priority`    ENUM('low','medium','high','critical') DEFAULT 'medium',
  `assigned_to` INT NULL,
  `created_by`  INT NOT NULL,
  `created_at`  DATETIME DEFAULT CURRENT_TIMESTAMP,
  `updated_at`  DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

CREATE TABLE `tblticket_status_history` (
  `id`         INT AUTO_INCREMENT PRIMARY KEY,
  `ticket_id`  INT NOT NULL,
  `old_status` VARCHAR(50),
  `new_status` VARCHAR(50),
  `changed_by` INT NOT NULL,
  `note`       TEXT,
  `created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (`ticket_id`) REFERENCES `tblsupport_tickets`(`id`) ON DELETE CASCADE
);

The Model — Role-Based Ticket Fetching

This is where the real logic lives. The key insight: one method, different queries depending on who's asking.

<?php
// app/Models/Support_model.php
namespace App\Models;

use CodeIgniter\Model;

class Support_model extends Model
{
    protected $table = 'tblsupport_tickets';

    /**
     * Fetch tickets based on user role.
     * Admins see all. Staff see only their assigned tickets.
     */
    public function getTicketsForUser(int $userId, bool $isAdmin): array
    {
        $builder = $this->db->table('tblsupport_tickets t')
            ->select('t.*, s.name as assigned_name, c.name as created_by_name')
            ->join('tblstaff s', 's.staffid = t.assigned_to', 'left')
            ->join('tblstaff c', 'c.staffid = t.created_by', 'left')
            ->orderBy('t.created_at', 'DESC');

        if (!$isAdmin) {
            // Non-admins only see their own assigned tickets
            $builder->where('t.assigned_to', $userId);
        }

        return $builder->get()->getResultArray();
    }

    /**
     * Assign a ticket to a staff member and log the change.
     */
    public function assignTicket(int $ticketId, int $staffId, int $assignedBy): bool
    {
        $this->db->table('tblsupport_tickets')
            ->where('id', $ticketId)
            ->update(['assigned_to' => $staffId, 'status' => 'in_progress']);

        // Log the assignment in history
        $this->db->table('tblticket_status_history')->insert([
            'ticket_id'  => $ticketId,
            'old_status' => 'open',
            'new_status' => 'in_progress',
            'changed_by' => $assignedBy,
            'note'       => 'Ticket assigned to staff #' . $staffId,
        ]);

        return $this->db->affectedRows() > 0;
    }
}

💡 Note:
Why this approach works: Keeping the visibility logic in the model means your controller stays clean. If you ever need to change the rules (e.g. team leads see their team's tickets), you change it in one place.

The Controller — Listing and Assigning

<?php
// app/Controllers/Support_tickets.php
namespace App\Controllers;

use App\Models\Support_model;

class Support_tickets extends BaseController
{
    protected Support_model $supportModel;

    public function __construct()
    {
        $this->supportModel = new Support_model();
    }

    public function index(): string
    {
        $session = session();
        $userId  = $session->get('staff_id');
        $isAdmin = $session->get('is_admin') == 1;

        $data['tickets'] = $this->supportModel->getTicketsForUser($userId, $isAdmin);
        $data['isAdmin'] = $isAdmin;

        return view('support_tickets/index', $data);
    }

    /**
     * AJAX endpoint — assign ticket to a staff member.
     */
    public function assign(): \CodeIgniter\HTTP\ResponseInterface
    {
        if (!$this->request->isAJAX()) {
            return $this->response->setStatusCode(403);
        }

        $ticketId   = (int) $this->request->getPost('ticket_id');
        $staffId    = (int) $this->request->getPost('staff_id');
        $assignedBy = session()->get('staff_id');

        $assigned = $this->supportModel->assignTicket($ticketId, $staffId, $assignedBy);

        if ($assigned) {
            $this->_sendAssignmentEmail($ticketId, $staffId);
            return $this->response->setJSON(['success' => true]);
        }

        return $this->response->setJSON(['success' => false, 'message' => 'Assignment failed']);
    }

    /**
     * Send email to the assigned staff member.
     */
    private function _sendAssignmentEmail(int $ticketId, int $staffId): void
    {
        $staffRow = $this->db->table('tblstaff')
            ->where('staffid', $staffId)
            ->get()->getRowArray();

        if (!$staffRow) return;

        $ticket = $this->db->table('tblsupport_tickets')
            ->where('id', $ticketId)
            ->get()->getRowArray();

        $email = \Config\Services::email();
        $email->setTo($staffRow['email']);
        $email->setSubject('New Ticket Assigned: ' . $ticket['subject']);
        $email->setMessage(
            "Hi {$staffRow['name']},\n\n" .
            "A ticket has been assigned to you:\n\n" .
            "Subject: {$ticket['subject']}\n" .
            "Priority: {$ticket['priority']}\n\n" .
            "Please log in to review and action it.\n\n" .
            "Regards,\nSupport System"
        );

        $email->send();
    }
}

The View — DataTable with Inline Assignment

<!-- app/Views/support_tickets/index.php -->
<table id="ticketsTable" class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Subject</th>
      <th>Priority</th>
      <th>Status</th>
      <?php if ($isAdmin): ?>
        <th>Assign To</th>
      <?php endif; ?>
      <th>Created</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($tickets as $ticket): ?>
    <tr>
      <td><?= $ticket['id'] ?></td>
      <td><?= esc($ticket['subject']) ?></td>
      <td>
        <span class="badge bg-<?= $ticket['priority'] === 'critical' ? 'danger' : 'warning' ?>">
          <?= ucfirst($ticket['priority']) ?>
        </span>
      </td>
      <td><?= ucfirst(str_replace('_', ' ', $ticket['status'])) ?></td>
      <?php if ($isAdmin): ?>
      <td>
        <select class="selectpicker assign-staff"
                data-ticket="<?= $ticket['id'] ?>"
                data-live-search="true"
                title="Assign...">
          <!-- Populated via AJAX or PHP loop over tblstaff -->
        </select>
      </td>
      <?php endif; ?>
      <td><?= date('d M Y', strtotime($ticket['created_at'])) ?></td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

<script>
// Inline assignment via AJAX
$(document).on('changed.bs.select', '.assign-staff', function () {
    const ticketId = $(this).data('ticket');
    const staffId  = $(this).val();

    $.post('<?= base_url('support_tickets/assign') ?>', {
        ticket_id: ticketId,
        staff_id:  staffId,
        '<?= csrf_token() ?>': '<?= csrf_hash() ?>'
    }, function (res) {
        if (res.success) {
            toastr.success('Ticket assigned and staff notified!');
        } else {
            toastr.error('Assignment failed. Try again.');
        }
    });
});
</script>

Common Pitfalls (and How I Fixed Them)

⚠️ 1. CSRF "Page Expired" on AJAX POST

Make sure you're sending csrf_token() and csrf_hash() with every POST. If you're using CodeIgniter's auto-regenerate CSRF, update the hash in the response and swap it client-side so the next request doesn't fail.

⚠️ 2. Bootstrap selectpicker not initializing on dynamic rows

Call $('.selectpicker').selectpicker('refresh') after any DOM update. If you're loading rows via DataTables, hook into drawCallback.

⚠️ 3. Email not sending on local dev

Set protocol = smtp in app/Config/Email.php and test with a real SMTP like Gmail or Mailtrap. Never debug with sendmail locally — it silently fails every time.

What to Build Next

This is a solid foundation. Here's what you can layer on top:

File attachments — store in S3 or local uploads, link to ticket ID
Customer-facing portal — external users submit and track their own tickets
SLA tracking — flag tickets that breach response time thresholds
Canned replies — let staff insert pre-written responses

Conclusion

A real support ticket system isn't complicated — but the details matter. Role-based visibility, status history, and email notifications are what separate a toy demo from something you can actually ship to a client.

If you found this useful, follow me for more CodeIgniter production tutorials — I publish new ones every week. 🙌

Senior PHP Developer with 12+ years building production systems on CodeIgniter, Laravel, and WordPress.

DEV Community: sunakshi Thakur

CodeIgniter 4 Pagination — Custom Styling with Bootstrap 5

The Problem with Default CI4 Pagination

Basic Setup First

1. The Model

2. The Controller

3. Basic View (before styling)

Custom Bootstrap 5 Pagination Template

Step 1 — Create the template file

Step 2 — Register the template in config

Step 3 — Use it in your view

Extra Styling — Make It Look Even Better

Show Record Count (Very Useful in Real Projects)

AJAX Pagination (No Page Reload)

Common Pitfalls

⚠️ 1. Pagination not working with WHERE filters

⚠️ 2. Template not found error

⚠️ 3. Page resets to 1 on form submit

Full Working Example — Products Page

What to Read Next

Conclusion

How to Build a Support Ticket System in CodeIgniter 4 — With Role-Based Visibility and Email Notifications

Why Build This?

Database Structure

The Model — Role-Based Ticket Fetching

The Controller — Listing and Assigning

The View — DataTable with Inline Assignment

Common Pitfalls (and How I Fixed Them)

⚠️ 1. CSRF "Page Expired" on AJAX POST

⚠️ 2. Bootstrap selectpicker not initializing on dynamic rows

⚠️ 3. Email not sending on local dev

What to Build Next

Conclusion