Codeigniter Tutorials

Home » Codeigniter »

Ajax pagination in codeigniter.

https://webdamn.com/ajax-pagination-in-codeigniter-with-example/

Table

File Name :

CREATE TABLE `developers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`skills` varchar(255) NOT NULL,
`address` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`designation` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

File Name :

INSERT INTO `developers` (`id`, `name`, `skills`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, 'Smith', 'Java', 'Newyork', 'Male', 'Software Engineer', 34, 'image_1.jpg'),
(2, 'David', 'PHP', 'London', 'Male', 'Web Developer', 28, 'image_2.jpg'),
(3, 'Rhodes', 'jQuery', 'New Jersy', 'Male', 'Web Developer', 30, 'image_2.jpg'),
(4, 'Sara', 'JavaScript', 'Delhi', 'Female', 'Web Developer', 25, 'image_2.jpg'),
(5, 'Shyrlin', 'NodeJS', 'Tokiyo', 'Female', 'Programmer', 35, 'image_2.jpg'),
(6, 'Steve', 'Angular', 'London', 'Male', 'Web Developer', 28, 'image_2.jpg'),
(7, 'Cook', 'MySQL', 'Paris', 'Male', 'Web Developer', 26, 'image_2.jpg'),
(8, 'Root', 'HTML', 'Paris', 'Male', 'Web Developer', 28, 'image_2.jpg'),
(9, 'William', 'jQuery', 'Sydney', 'Male', 'Web Developer', 23, 'image_2.jpg'),
(10, 'Nathan', 'PHP', 'London', 'Male', 'Web Developer', 28, 'image_2.jpg'),
(11, 'Shri', 'PHP', 'Delhi', 'Male', 'Web Developer', 38, 'image_2.jpg'),
(12, 'Jay', 'PHP', 'Delhi, India', 'Male', 'Web Developer', 30, 'image_3.jpg');

Controller

File Name : Employee.php

<?php
defined("BASEPATH") OR exit('no direct script access allowed');
class Employee extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->library('pagination');
$this->load->model('Auth_model');
}

public function index()
{
$this->load->view('employee');
}

public function loadData($record=0) {
$recordPerPage = 5;
if($record != 0){
$record = ($record-1) * $recordPerPage;
}
$recordCount = $this->Auth_model->getRecordCount();
$empRecord = $this->Auth_model->getRecord($record,$recordPerPage);
$config['base_url'] = base_url().'index.php/Employee/loadData';
$config['use_page_numbers'] = TRUE;
$config['next_link'] = 'Next';
$config['prev_link'] = 'Previous';
$config['total_rows'] = $recordCount;
$config['per_page'] = $recordPerPage;
$this->pagination->initialize($config);
$data['pagination'] = $this->pagination->create_links();
$data['empData'] = $empRecord;
echo json_encode($data);
}

}
?>

Model

File Name : Auth_model.php

<?php
defined("BASEPATH") OR exit('no direct script access allowed');
class Auth_model extends CI_model
{
public function __construct() {
parent::__construct();
}

public function getRecord($rowno,$rowperpage) {
$this->db->select('*');
$this->db->from('developers');
$this->db->limit($rowperpage, $rowno);
$query = $this->db->get();
return $query->result_array();
}
public function getRecordCount() {
$this->db->select('count(*) as allcount');
$this->db->from('developers');
$query = $this->db->get();
$result = $query->result_array();
return $result[0]['allcount'];
}

}

?>

View

File Name : employee.php

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

</head>
<body>

<div class="container">
<div class="row ">
<table id='employeeList' class="table table-bordered">
<thead>
<tr>
<th>EmpId</th>
<th>Name</th>
<th>Age</th>
<th>Skills</th>
<th>Designation</th>
<th>Address</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id='pagination'></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
createPagination(0);
$('#pagination').on('click','a',function(e){
e.preventDefault();
var pageNum = $(this).attr('data-ci-pagination-page');
alert(pageNum);
createPagination(pageNum);
});
function createPagination(pageNum){
$.ajax({
url: '<?=base_url()?>Employee/loadData/'+pageNum,
type: 'get',
dataType: 'json',
success: function(responseData){
$('#pagination').html(responseData.pagination);
paginationData(responseData.empData);
}
});
}
function paginationData(data) {
$('#employeeList tbody').empty();
for(emp in data){
var empRow = "<tr>";
empRow += "<td>"+ data[emp].id +"</td>";
empRow += "<td>"+ data[emp].name +"</td>";
empRow += "<td>"+ data[emp].age +"</td>"
empRow += "<td>"+ data[emp].skills +"</td>"
empRow += "<td>"+ data[emp].designation +"</td>"
empRow += "<td>"+ data[emp].address +"</td>";
empRow += "</tr>";
$('#employeeList tbody').append(empRow);
}
}
});
</script>

</body>

</html>

Example

File Name :

Controller

File Name :

<?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

File Name :

<?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 index.php

File Name :

<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>

index_ajax.php

File Name : 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>

header.php

File Name :

<!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>


<link href="<?php echo base_url('assets/css/bootstrap.min.css') ?>" rel="stylesheet">


<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="#">ittutorial.in</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>

footer.php

File Name :

<hr />
<footer class="text-center">
<p>© <?php echo date('Y') ?> ittutorial.in</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>

Itechtuto

Codeigniter Tutorials

Ajax pagination in codeigniter.

File Name :

File Name :

File Name : Employee.php

File Name : Auth_model.php

File Name : employee.php

File Name :

File Name :

File Name :

File Name :

File Name : index_ajax.php

File Name :

File Name :

Connect Us Socially:

Quick Links