CodeIgniter’s Pagination class is very easy to use. works with the model, and capable of supporting multiple paginators on a single page.
Pagination is particularly useful when you are coding an application that interfaces with a database.
A large dataset might have hundreds of possible results for one query, and pagination creates a much nicer user experience.
create a paginated list of results from a MySQL database.
create a controller file controllers/Pagination.php with the following contents.
- the first thing you need to do is to load the pagination library.
$this->load->library("pagination"); - The variable per_page defines the limit per page. you can change as your wish.
- base_url : - The URL that will be used while building pagination links.
- total_rows : - Total number of records.
|
<?php
class Pagination extends CI_Controller {
public function __construct() { parent::__construct();
// load URL helper $this->load->helper('url');
// load Pagination library $this->load->library("pagination"); }
public function index() {
// load model $this->load->model('user_detail');
// init config $config = array(); $config["base_url"] = base_url() . "Pagination";
// get total count $config["total_rows"] = $this->user_detail->record_count(); $config["per_page"] = 4;
// paging configuration
$config['per_page_link'] = TRUE; $config['per_page_array'] = array(5, 10, 15, 20); $config["use_page_numbers"] = TRUE; $config['page_query_string'] = FALSE;
$config['query_string_segment'] = '';
$config['use_page_numbers'] = TRUE; $config['page_query_string'] = FALSE;
$config['query_string_segment'] = '';
$config['full_tag_open'] = '<ul>'; $config['full_tag_close'] = '</ul>';
$config['first_link'] = '<'; $config['first_tag_open']='<li class="pageNumber"><a href="#" class="pageNumber">'; $config['first_tag_close'] = '</a></li>';
$config['last_link'] = '>'; $config['last_tag_open']= '<li class="pageNumber"><a href="#" class="pageNumber">'; $config['last_tag_close'] = '<a></li>';
$config['next_link'] = '>'; $config['next_tag_open']='<li class="pageNumber"><a href="#" class="pageNumber">'; $config['next_tag_close'] = '</a></li>';
$config['prev_link'] = '<'; $config['prev_tag_open']='<li class="pageNumber"><a href="#" class="pageNumber">'; $config['prev_tag_close'] = '</a></li>';
$config['cur_tag_open'] = '<li class="pageNumber active"><a href="#">'; $config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li class="pageNumber">'; $config['num_tag_close'] = '</li>';
$config['anchor_class'] = 'follow_link';
$this->pagination->initialize($config);
$page = ($this->uri->segment(2)) ? $this->uri->segment(2) : 1; $data["data"] = $this->user_detail->fetch_user_detail($config["per_page"], $page);
// paging link $data["links"] = $this->pagination->create_links();
$this->load->view('pagination', $data); } }
?> |
Next, we'll need a model file models/User_detail.php
that fetches records from the user_detail table.
|
<?php
class User_detail extends CI_Model {
// get all records public function fetch_user_detail($limit, $start) {
$this->db->limit($limit, (($start-1) * $limit)); $query = $this->db->get("user_detail");
if ($query->num_rows() > 0) { foreach ($query->result() as $row) { $data[] = $row; } return $data; } return false;
}
// get tottal count public function record_count() { return $this->db->count_all("user_detail"); } } ?> |
Finally, let's create a view file at views/Pagination.php that displays the user listing.
<!DOCTYPE html> <html lang="en">
<head> <title>Pagignation</title>
</head> <body>
<?php foreach ($data as $val) { ?> <p><strong><?= $val->username ?></strong></p> <p><?= $val->description ?></p> <br><hr> <?php } ?>
<div class="pagination ">
// Pagignation <?php echo $links; ?>
</div> </body> </html> |
Style.css
| .pagination{ display: flex; align-items: center; } ul { position: relative; background: #636d7e; display: flex; padding: 10px 20px; border-radius: 50px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } ul li { list-style: none; line-height: 50px; margin: 0 5px; } ul li.pageNumber { width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; background: #dde7f5; color: #8fa0b4; } ul li a { display: block; text-decoration: none; color: #768393; font-weight: 600; border-radius: 50%; } ul li.pageNumber:hover a, ul li.pageNumber.active a { background: #4d85fd; color: #fff; border-color: #4d85fd; } ul li:first-child { font-weight: 700; font-size: 20px; } ul li:last-child { font-weight: 700; font-size: 20px; } |
Note :
You can add the following content in
config/routes.php file.
$route['Pagination/(:num)'] = 'Pagination';
Result :
