How To Make Ajax Pagination in Codeigniter
Hi friends. This Pagination example is extremely fast and efficient because let me tell you that I am not using any Codeigniter Pagination class. So just enjoy this simple code for how to make Ajax Pagination in Codeigniter.
Lets begin the tutorial.
STEP 1:
Download Codeigniter from here. Now unzip the file and put this folder in your local server folder(www or htdocs).
STEP 2:
We need to create a database table. So create a ‘countries’ table in mysql database.
[code]CREATE TABLE IF NOT EXISTS `countries` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`country_code` varchar(2) NOT NULL DEFAULT ”,
`country_name` varchar(100) NOT NULL DEFAULT ”,
PRIMARY KEY (`id`)
);
[/code]
and add some records in countries.sql
STEP 3: DATABASE CONFIGURATION
Update the database.php file under the directory(/application/config/database.php).
Set database setting.
[code]
$db[‘default’][‘hostname’] = ‘localhost’;
$db[‘default’][‘username’] = ‘root’;
$db[‘default’][‘password’] = ‘your password’;
$db[‘default’][‘database’] = ‘your database name’;
$db[‘default’][‘dbdriver’] = ‘mysql’;
$db[‘default’][‘dbprefix’] = ”;
$db[‘default’][‘pconnect’] = TRUE;
$db[‘default’][‘db_debug’] = TRUE;
$db[‘default’][‘cache_on’] = FALSE;
$db[‘default’][‘cachedir’] = ”;
$db[‘default’][‘char_set’] = ‘utf8’;
$db[‘default’][‘dbcollat’] = ‘utf8_general_ci’;
$db[‘default’][‘swap_pre’] = ”;
$db[‘default’][‘autoinit’] = TRUE;
$db[‘default’][‘stricton’] = FALSE;
[/code]
and SAVE.
STEP 4.
Now open the file config.php under the directory (/application/config/config.php) and update base url.
[code]
$config[‘base_url’] = ‘http://localhost/ci_ajax_pagination/’;
[/code]
and SAVE.
STEP 5.
Now open the file welcome.php under the directory (application/controller/welcome.php) and paste following code in it.
[code]
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’); class Welcome extends CI_Controller { public function __construct() { parent::__construct(); } public function index() { $this->load->view(‘welcome_message’);
}
public function pagination(){
$page_number = $this->input->post(‘page_number’);
$item_par_page = 10;
$position = ($page_number*$item_par_page);
$result_set = $this->db->query("SELECT * FROM countries LIMIT ".$position.",".$item_par_page);
$total_set = $result_set->num_rows();
$page = $this->db->get(‘countries’) ;
$total = $page->num_rows();
//break total recoed into pages
$total = ceil($total/$item_par_page);
if($total_set>0){
$entries = null;
// get data and store in a json array
foreach($result_set->result() as $row){
$entries[] = $row;
}
$data = array(
‘TotalRows’ => $total,
‘Rows’ => $entries
);
$this->output->set_content_type(‘application/json’);
echo json_encode(array($data));
}
exit;
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
[/code]
and save. Your controller is ready to service.
STEP 6.
Now open the file welcome_message.php under the directory(application/view/welcome_message.php) and paste the following code in it.
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pagination</title>
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!– Latest compiled and minified JavaScript –>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="row">
<div class="col-md-6">
<h2>Welcome to CI Ajax Pagination</h2>
<a href="https://www.facebook.com/Meul Tech Classes">by Meul Tech </a>
</div><div class="col-md-6">
<!– Go to www.addthis.com/dashboard to customize your tools –>
<!– Go to www.addthis.com/dashboard to customize your tools –>
</div></div>
<hr/>
<table class="table" style="height: 452px;">
<thead><tr><th>Sr. No</th>
<th>Country Code</th>
<th>Country name</th>
<input type="text" name="search" id="search" placeholder="search country" class="pull-right"/></tr></thead><tbody class="tb">
</tbody>
</table>
<hr/>
<div class="row clear-fix">
<div class="col-md-4 pull-right">
<button id="previous" class="btn btn-sm btn-primary">Previous</button>
<lable>Page <lable id="page_number"></lable> of <lable id="total_page"></lable></lable>
<button id="next" class="btn btn-sm btn-primary">Next</button>
</div>
</div><div style="text-align: center">
<img id="load_ajax_png" src="http://sanwebe.com/assets/ajax-load-more-results/ajax-loader.gif" alt="loading" style="display: none"/>
</div>
</div>
<script>
var page_number=0;
var total_page =null;
var sr =0;
var sr_no =0;
var getReport = function(page_number){
if(page_number==0){
$("#previous").prop(‘disabled’, true);}
else{
$("#previous").prop(‘disabled’, false);}
if(page_number==(total_page-1)){
$("#next").prop(‘disabled’, true);}
else{
$("#next").prop(‘disabled’, false);}
$("#page_number").text(page_number+1);
$.ajax({
url:"<?php echo base_url() ?>index.php/welcome/pagination",
type:"POST",
dataType: ‘json’,
data:’page_number=’+page_number,
success:function(data){
window.mydata = data;
total_page= mydata[0].TotalRows;
$("#total_page").text(total_page);
var record_par_page = mydata[0].Rows;
$.each(record_par_page, function (key, data) {
sr =(key+1);
$(".tb").append(‘
<tr><td>’+sr+'</td>
<td>’+data.id+'</td>
<td>’+data.country_name+'</td></tr>
‘);
});
}
});
};
var search = function (str){
if(str!=”){
// $.ajax({
// url:"<?php echo base_url() ?>index.php/welcome/pagination",
// type:"POST",
// dataType: ‘json’,
// data:’search=’+str,
// success:function(data){
// window.mydata = data;
// total_page= mydata[0].TotalRows;
// $("#total_page").text(total_page);
// var record_par_page = mydata[0].Rows;
// $.each(record_par_page, function (key, data) {
// sr =(key+1);
// $(".tb").append(‘
<tr>
<td>’+sr+'</td>
<td>’+data.id+'</td>
<td>’+data.name+'</td></tr>
‘);
// });
// }
// });
}
};
$(document).ready(function(e){
getReport(page_number);
console.log(sr);
$("#next").on("click", function(){
$(".tb").html("");
page_number = (page_number+1);
getReport(page_number);
console.log(sr);
});
$("#previous").on("click", function(){
$(".tb").html("");
page_number = (page_number-1);
getReport(page_number);
});
$("#search").on(‘keyup’, function(){
var str = $.trim($(this).val());
search(str);
});
});
</script>
</body>
</html>
[/code]
and SAVE.
Now finally hit the url of your localhost project directory and enjoy the code.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Ajax Login System in PHP Codeigniter
- Create, Read, Update and Delete Records in Codeigniter using Ajax – CRUD OPERATION
- Create A Simple Website Using Codeigniter
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics: 1. Codeigniter Training in Mumbai .
2. Web Designing Training in Mumbai.
3. Bootstrap Training Course in Mumbai.
4. UI / UX Training.