AJAX Pagination in Codeigniter
Posted at: September 15, 2018 7:31 PM
Create ajax pagination in codeigniter.
Controller
Create controller file Products.php
application/controllers/Products.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Products extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('product_model');
}
public function index()
{
$data['title'] = "Products";
$this->load->view('header', $data);
$this->load->view('products/index', $data);
$this->load->view('footer', $data);
}
public function index_ajax($offset=null)
{
$search = array(
'keyword' => trim($this->input->post('search_key')),
);
$this->load->library('pagination');
$limit = 5;
$offset = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
$config['base_url'] = site_url('products/index_ajax/');
$config['total_rows'] = $this->product_model->get_products($limit, $offset, $search, $count=true);
$config['per_page'] = $limit;
$config['uri_segment'] = 3;
$config['num_links'] = 3;
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li><a href="" class="current_page">';
$config['cur_tag_close'] = '</a></li>';
$config['next_link'] = 'Next';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['prev_link'] = 'Previous';
$config['prev_tag_open'] = '<li>';
$config['prev_tag_close'] = '</li>';
$config['first_link'] = 'First';
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['last_link'] = 'Last';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$this->pagination->initialize($config);
$data['products'] = $this->product_model->get_products($limit, $offset, $search, $count=false);
$data['pagelinks'] = $this->pagination->create_links();
$this->load->view('products/index_ajax', $data);
}
}
?>
Model
Create model file Product_model.php
application/models/Product_model.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Product_model extends CI_model {
public function __construct()
{
parent::__construct();
}
public function get_products($limit, $offset, $search, $count)
{
$this->db->select('*');
$this->db->from('products');
if($search){
$keyword = $search['keyword'];
if($keyword){
$this->db->where("product_name LIKE '%$keyword%'");
}
}
if($count){
return $this->db->count_all_results();
}
else {
$this->db->limit($limit, $offset);
$query = $this->db->get();
if($query->num_rows() > 0) {
return $query->result();
}
}
return array();
}
}
?>
View
Create views file index.php
application/views/index.php
<div class="container">
<div class="row">
<div class="col-md-4">
<h1><?php echo $title ?></h1>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-8">
<div class="search-field">
<input type="text" class="form-control" name="search_key" id="search_key" placeholder="Search by product name" />
</div>
</div>
<div class="col-md-4">
<div class="search-button">
<button type="button" id="searchBtn" class="btn btn-info">Search</button>
<button type="button" id="resetBtn" class="btn btn-warning">Reset</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="ajaxContent"></div>
</div>
</div>
</div>
Create views file index_ajax.php
application/views/index_ajax.php
<div class="box-body">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th>ID#</th>
<th>Product Name</th>
<th>SKU</th>
<th>Price</th>
<th>Is Active</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if( ! empty($products)) { ?>
<?php foreach($products as $product){ ?>
<tr>
<td width="40px"><?php echo $product->id ?></a></td>
<td><?php echo $product->product_name ?></td>
<td><?php echo $product->sku ?></td>
<td><?php echo $product->price ?></td>
<td>
<?php echo ($product->is_active)?'<span class="label label-success">Enabled</span>':'<span class="label label-danger">Disabled</span>' ?>
</td>
<td><?php echo $product->created_at ?></td>
<td class="action">
<?php echo anchor('', 'Edit', array('title' => 'Edit'))?>
</td>
</tr>
<?php } ?>
<?php } else { ?>
<tr><td colspan="8" class="no-records">No records</td></tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<ul class="pagination">
<?php echo $pagelinks ?>
</ul>
</div>
Create views file header.php
application/views/header.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title><?php echo $title ?></title>
<!-- Bootstrap core CSS -->
<link href="<?php echo base_url('assets/css/bootstrap.min.css') ?>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?php echo base_url('assets/css/styles.css') ?>" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="#">TRUECODEX.COM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo site_url('products') ?>">Products</a>
</li>
</ul>
</div>
</nav>
Create views file footer.php with ajax code
application/views/footer.php
<hr />
<footer class="text-center">
<p>© <?php echo date('Y') ?> truecodex.com</p>
</footer>
<script src="<?php echo base_url('assets/js/jquery-3.3.1.min.js') ?>"></script>
<script src="<?php echo base_url('assets/js/bootstrap.min.js') ?>"></script>
<script>
$(function() {
/*--first time load--*/
ajaxlist(page_url=false);
/*-- Search keyword--*/
$(document).on('click', "#searchBtn", function(event) {
ajaxlist(page_url=false);
event.preventDefault();
});
/*-- Reset Search--*/
$(document).on('click', "#resetBtn", function(event) {
$("#search_key").val('');
ajaxlist(page_url=false);
event.preventDefault();
});
/*-- Page click --*/
$(document).on('click', ".pagination li a", function(event) {
var page_url = $(this).attr('href');
ajaxlist(page_url);
event.preventDefault();
});
/*-- create function ajaxlist --*/
function ajaxlist(page_url = false)
{
var search_key = $("#search_key").val();
var dataString = 'search_key=' + search_key;
var base_url = '<?php echo site_url('products/index_ajax/') ?>';
if(page_url == false) {
var page_url = base_url;
}
$.ajax({
type: "POST",
url: page_url,
data: dataString,
success: function(response) {
console.log(response);
$("#ajaxContent").html(response);
}
});
}
});
</script>
</body>
</html>
Create css file styles.php
assets/css/styles.css
.content {min-height:450px;}
/*Pagination*/
.pagination {
float:right;
}
.pagination li a {
padding:4px 8px;
border:1px solid #0056b3;
margin:2px;
}
.pagination li a:hover{
text-decoration:none;
background-color:#0056b3;
color:#fff;
}
.pagination li a.current_page{
background-color:#0056b3;
color:#fff;
}
Output
This lesson also available on YouTube
AJAXPaginationAJAX Pagination
Please leave comments
6 Comments
robert
1 year ago
if many search criteria?
Reply
errorman
3 years ago
please send me or add content about the database & full sourcecode with version of bootstrap /jquery that works.
Reply
Divya
3 years ago
Perfect Article, very userful.
Reply
Ajinkya
3 years ago
Non Sense Artical , No Use of those Setup
Reply
Test Vtro User
3 years ago
perfect pagination in codeigniter using datatables
Reply
ajay
4 years ago
good article
Reply
