Codeigniter Tutorials
- What is codeigniter?
- Application_Architecture
- MVC Architecture
- HMVC Architecture
- Codeigniter Configuration
- Remove index.php from url in codeigniter
- MVC Concept
- View
- Alternate PHP Syntax for View Files
- Routing
- Codeigniter URL
- Get Current URL
- Previous page URL get
- Seo Friendly URL
- Slug Create in codeigniter
- What is _remap() function
- Remove controller name from url in codeigniter
- Codeigniter Controller Class
- Class Constructor
- GET $ POST method in Codeigniter
- Models
- Basepath, Apppath, FCPATH
- URI Segment
- Page Redirect
- Helper class
- Custom Helper class
- Form Helper
- Common Helper Functions
- Common Function
- Array Problems
- Call controller in Helper
- Add active class to menu using Helper class
- Custom Library
- Custom Library Example
- when to use get_instance()
- Codeigniter Hook
- how to work inline css in codeigniter
- Custom 404 page
- 404 custom error page
- Create custom config file in codeigniter
- How to set and get config item value
- How to Speed Up CodeIgniter App?
- Codeigniter Functions
- Session
- cookies
- How to Set & Get Tempdata in Codeigniter
- flash messages in Codeigniter
- Flashdata
- Encryption and Decryption In CodeIgniter
- Codeigniter security
- csrf token form security
- Password Hashing
- Form Validation
- Custom Validation
- Registration Form with validation
- Server Side Form Validation
- Validate Select Option Field
- Date Format Validation
- Date Format change in codeigniter
- Date Functions
- DOB Validation
- CI CRUD
- User SignUp
- User Login
- User Logout
- Login Account
- Login form with RememberMe
- Login Form with session
- User change password
- Change Password with Callback Validation to Check Old Password
- Forgot password
- Reset password
- Insert data in database
- Fetch data from database
- Update data in database
- Delete data in database
- File Upload
- Image Upload with resize Image
- Upload Multiple file and images
- Upload Multiple images with CRUD
- File and image update
- Upload Image Using Ajax.
- Email Send
- Email Send Using Email library
- Email Send Using SMTP Gmail
- Notification send
- store data in json format in DB
- Json parse
- Fetch data Using Ajax with Json data
- How to Show data Using Ajax with Json parse
- Get JSON Data from PHP Script using jQuery Ajax
- Insert data Using Ajax
- Submit data Using Ajax with form validation
- How to show data Using Ajax in codeigniter
- Insert & Update Using Ajax
- Registration Form With Validation Using Ajax in codeigniter
- Delete data Using Ajax Confirmation
- Delete All data Using checkbox selection
- Ajax CSRF Token
- Ajax Post
- Ajax serverside form validation
- Contact form using AJAX with form validation
- DataTable Using Ajax dynamically
- DataTables pagination using AJAX with Custom filter
- DataTables AJAX Pagination with Search and Sort in codeigniter
- DataTables in Codeigniter using Ajax
- Ajax Custom Serarch
- Ajax Live Data Search using Jquery PHP MySql
- Ajax Custom Serarch and sorting in datatable
- Dynamic Search Using Ajax
- Autocomplete using jquery ajax
- Jquery Ajax Autocomplete Search using Typeahead
- Dynamic Dependent Dropdown Using Ajax
- Dynamic Dependent Dropdown list Using Ajax
- Dynamic Dependent Dropdown in codeigniter using Ajax
- ajax username/email availability check using JQuery
- Check Email Availability Using Ajax
- Data Load on mouse scroll
- Ajax CI Pagination
- Pagination in codeigniter
- Ajax Codeigniter Pagination
- email exists or not using ajax with json
- CRUD using AJAX With Modal popup in CI
- Add / Show Data on modal popup using Ajax
- Modal popup Validation using Ajax
- Data show on Modal popup Using Ajax
- Add / Remove text field dynamically using jquery ajax
- How to Add/Delete Multiple HTML Rows using JavaScript
- Delete Multiple Rows using Checkbox
- Multiple Checkbox value
- Form submit using jquery Example
- REST & SOAP API
- Multi-Language implementation in CodeIgniter
- How to pass multiple array in view
- Captcha
- create zip file and download
- PhpOffice PhpSpreadsheet Library (Export data in excel sheet)
- data export in excel sheet
- Excel File generate in Codeigniter using PHPExcel
- Dompdf library
- tcpdf library
- Html table to Excel & docs download
- CI Database Query
- Database Query
- SQL Injection Prevention
- Auth Model
- Join Mysql
- Tree View in dropdown option list
- OTP Integration in codeigniter
- curl post
- download file using curl
- Sweet Alert
- Sweet alert Delete & Success
- Log Message in Codeigniter
- Menu & Submenu show dynamically
- Set Default value in input box
- Cron Jobs
- Stored Procedure
- Display Loading Image when AJAX call is in Progress
- Send SMS
- IP Address
- Codeigniter Tutorialspoint
- Website Link
- How To Create Dynamic Xml Sitemap In Codeigniter
- Paypal Payment Integration
- Get Latitude and Longitude From Address in Codeigniter Using google map API
- How To Create Simple Bar Chart In Codeigniter Using AmCharts?
- dynamic Highcharts in Codeigniter
- Barcode in Codeigniter
- Codeigniter Interview Questions
- Project
Home » Codeigniter »
Ajax Pagination
File Name : Controller
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Ajax_pagination extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->helper('url');
$this->load->library('pagination');
$this->load->database();
}
public function index(){
$this->load->view('ajax_pagination');
}
public function loadRecord($rowno=0){
$rowperpage = 5;
if($rowno != 0){
$rowno = ($rowno-1) * $rowperpage;
}
$allcount = $this->db->count_all('post');
$this->db->limit($rowperpage, $rowno);
$users_record = $this->db->get('post')->result_array();
$config['base_url'] = base_url().'ajax_pagination/loadRecord';
$config['use_page_numbers'] = TRUE;
$config['total_rows'] = $allcount;
$config['per_page'] = $rowperpage;
$config['full_tag_open'] = '<div class="pagging text-center"><nav><ul class="pagination">';
$config['full_tag_close'] = '</ul></nav></div>';
$config['num_tag_open'] = '<li class="page-item"><span class="page-link">';
$config['num_tag_close'] = '</span></li>';
$config['cur_tag_open'] = '<li class="page-item active"><span class="page-link">';
$config['cur_tag_close'] = '<span class="sr-only">(current)</span></span></li>';
$config['next_tag_open'] = '<li class="page-item"><span class="page-link">';
$config['next_tag_close'] = '<span aria-hidden="true"></span></span></li>';
$config['prev_tag_open'] = '<li class="page-item"><span class="page-link">';
$config['prev_tag_close'] = '</span></li>';
$config['first_tag_open'] = '<li class="page-item"><span class="page-link">';
$config['first_tag_close'] = '</span></li>';
$config['last_tag_open'] = '<li class="page-item"><span class="page-link">';
$config['last_tag_close'] = '</span></li>';
$this->pagination->initialize($config);
$data['pagination'] = $this->pagination->create_links();
$data['result'] = $users_record;
$data['row'] = $rowno;
echo json_encode($data);
}
}
View Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codeigniter Ajax Pagination</title>
<meta charset="utf-8">
<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">
<style type="text/css">
html, body { font-family: 'Raleway', sans-serif; }
a{ color: #007bff; font-weight: bold;}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
Ajax CI Pagination Example - itechxpert
</div>
<div class="card-body">
<!-- Posts List -->
<table class="table table-borderd" id='postsList'>
<thead>
<tr>
<th>id</th>
<th>PostTitle</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- Paginate -->
<div id='pagination'></div>
</div>
</div>
</div>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#pagination').on('click','a',function(e){
e.preventDefault();
var pageno = $(this).attr('data-ci-pagination-page');
loadPagination(pageno);
});
loadPagination(0);
function loadPagination(pagno){
$.ajax({
url: '<?php echo base_url();?>ajax_pagination/loadRecord/'+pagno,
type: 'get',
dataType: 'json',
success: function(response){
$('#pagination').html(response.pagination);
createTable(response.result,response.row);
}
});
}
function createTable(result,sno){
sno = Number(sno);
$('#postsList tbody').empty();
for(index in result){
var id = result[index].id;
var post_title = result[index].post_title;
var post_description = result[index].post_description;
//content = post_description.substr(0, 60) + " ...";
var link = result[index].post_description;
sno+=1;
var tr = "<tr>";
tr += "<td>"+ sno +"</td>";
tr += "<td><a href='"+ link +"' target='_blank' >"+ post_title +"</a></td>";
tr += "</tr>";
$('#postsList tbody').append(tr);
}
}
});
</script>
</body>
</html>
Model
CREATE TABLE IF NOT EXISTS `posts` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`post_title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`post_description` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=533 ;
Example 2:
Example 3:
application/config/pagination.php
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
/**
* Pagination Config
*
* Just applying codeigniter's standard pagination config with twitter
* bootstrap stylings
*
* @author Jaeeme Khan
* @link http://codeigniter.com/user_guide/libraries/pagination.html
* @email jaeeme.khan@sitanet.in
*
* @file pagination.php
* @version 1.0.0.1
* @date 08/09/2015
*
* Copyright (c) 2015
*/
/* -------------------------------------------------------------------------- */
$config['per_page'] = 10;
$config['num_links'] = 2;
$config['use_page_numbers'] = TRUE;
$config['page_query_string'] = FALSE;
$config['query_string_segment'] = '';
$config['full_tag_open'] = '<ul class="pagination justify-content-end">';
$config['full_tag_close'] = '</ul>';
$config['attributes'] = ['class' => 'page-link'];
$config['first_link'] = '« First';
$config['first_tag_open'] = '<li class="page-item">';
$config['first_tag_close'] = '</li>';
$config['last_link'] = 'Last »';
$config['last_tag_open'] = '<li class="page-item">';
$config['last_tag_close'] = '</li>';
$config['next_link'] = 'Next →';
$config['next_tag_open'] = '<li class="page-item">';
$config['next_tag_close'] = '</li>';
$config['prev_link'] = '← Prev';
$config['prev_tag_open'] = '<li class="page-item">';
$config['prev_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="page-item active"><a href="#" class="page-link">';
$config['cur_tag_close'] = '<span class="sr-only">(current)</span></a></li>';
$config['num_tag_open'] = '<li class="page-item">';
$config['num_tag_close'] = '</li>';
$config['anchor_class'] = 'follow_link';
?>
Model:
<?php
defined('BASEPATH') OR
exit('No direct script access allowed');
/**
* Version: 1.0.0
*
* Description of Employee model
*
* @author TechArise Team
*
* @email info@techarise.com
*
**/
// Employee class
class Employee_model extends CI_Model {
// Declare variables
private $_limit;
private $_pageNumber;
private $_offset;
public function setLimit($limit) {
$this->_limit = $limit;
}
public function setPageNumber($pageNumber) {
$this->_pageNumber = $pageNumber;
}
public function setOffset($offset) {
$this->_offset = $offset;
}
// Count all record of table "employee" in database.
public function getAllEmployeeCount() {
$this->db->from('employee');
return $this->db->count_all_results();
}
// Fetch data according to per_page limit.
public function employeeList() {
$this->db->select(array('e.id', 'e.name', 'e.email', 'e.salary', 'e.age'));
$this->db->from('employee as e');
$this->db->limit($this->_pageNumber, $this->_offset);
$query = $this->db->get();
return $query->result_array();
}
}
?>
Controller:
<?php
defined('BASEPATH') OR
exit('No direct script access allowed');
/**
* Version: 1.0.0
*
* Description of Employee Controller
*
* @author TechArise Team
*
* @email info@techarise.com
*
**/
// Employee class
class Employee extends CI_Controller {
//Load libraries in Constructor.
public function __construct() {
parent::__construct();
$this->load->library('pagination');
$this->load->model('Employee_model', 'employee');
}
// index method
public function index() {
$data['metaDescription'] = 'Ajax Pagination Using CodeIgniter and MySQL';
$data['metaKeywords'] = 'Ajax Pagination Using CodeIgniter and MySQL';
$data['title'] = "Ajax Pagination Using CodeIgniter and MySQL - TechArise";
$data['breadcrumbs'] = array('Ajax Pagination Using CodeIgniter and MySQL' => '#');
$this->load->view('employee/index', $data);
}
// loadData
public function loadData() {
$data = array();
$config['total_rows'] = $this->employee->getAllEmployeeCount();
$data['total_count'] = $config['total_rows'];
$config['suffix'] = '';
if ($config['total_rows'] > 0) {
$page_number = $this->input->post('pageNum');
if ($page_number > 0) {
$config['base_url'] = base_url() . 'employee/loadData';
} else {
$config['base_url'] = base_url() . 'employee/loadData/';
}
if (empty($page_number))
$page_number = 1;
$offset = ($page_number - 1) * $this->pagination->per_page;
$this->employee->setPageNumber($this->pagination->per_page);
$this->employee->setOffset($offset);
$this->pagination->cur_page = $offset;
$config['attributes'] = array('class' => 'page-link');
$this->pagination->initialize($config);
$data['page_links'] = $this->pagination->create_links();
$data['employeeInfo'] = $this->employee->employeeList();
}
$this->output->set_header('Content-Type: application/json');
echo json_encode($data);
}
}
?>
header.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!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="">
<title><?php print $title; ?></title>
<link rel="icon" type="image/ico" href="<?php print HTTP_IMAGE_PATH; ?>favicon.ico">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- Custom fonts for this template -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="<?php print HTTP_CSS_PATH; ?>style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
<div class="container">
<a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="https://techarise.com">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://techarise.com/php-free-script-demos/">Live Demo</a>
</li>
</ul>
</div>
</div>
</nav>
Footer.php
<!-- Footer -->
<footer class="footer bg-light footer-bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item">
<a href="#">About</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Contact</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Terms of Use</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Privacy Policy</a>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">Copyright © 2011 - <?php print date('Y', time());?> <a href="https://techarise.com/">TECHARISE.COM</a> All rights reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="#">
<i class="fab fa-facebook fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="#">
<i class="fab fa-twitter-square fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-instagram fa-2x fa-fw"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script>
var baseurl = "<?php print site_url();?>";
</script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
View
<?php $this->load->view('templates/header');?>
<section class="showcase">
<div class="container">
<div class="pb-2 mt-4 mb-2 border-bottom">
<h2>Ajax Pagination Using CodeIgniter and MySQL</h2>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 mb-12">
<table id='employeeList' class="table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Salary</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right" id="pagination_page_link"></div>
</div>
</div>
</section>
<?php $this->load->view('templates/footer');?>
<script type='text/javascript'>
jQuery(document).ready(function() {
createPagination(0);
jQuery('#pagination_page_link').on('click','li.page-item a',function(e){
e.preventDefault();
var pageNum = $(this).attr('data-ci-pagination-page');
createPagination(pageNum);
});
// create Pagination
function createPagination(pageNum){
jQuery.ajax({
type: 'POST',
url:baseurl+'Employee/loadData',
data:{pageNum:pageNum},
dataType: 'json',
success: function(json) {
jQuery('#pagination_page_link').html(json.page_links);
paginationData(json.employeeInfo);
}
});
}
// pagination data
function paginationData(data) {
jQuery('#employeeList tbody').empty();
for(key in data) {
var empRow = "<tr>";
empRow += "<td>"+ data[key].name +"</td>";
empRow += "<td>"+ data[key].email +"</td>"
empRow += "<td>"+ data[key].salary +"</td>"
empRow += "<td>"+ data[key].age +"</td>"
empRow += "</tr>";
jQuery('#employeeList tbody').append(empRow);
}
}
});
</script>
Ajax request
<script type='text/javascript'>
jQuery(document).ready(function() {
createPagination(0);
jQuery('#pagination_page_link').on('click','li.page-item a',function(e){
e.preventDefault();
var pageNum = $(this).attr('data-ci-pagination-page');
createPagination(pageNum);
});
// create Pagination
function createPagination(pageNum){
jQuery.ajax({
type: 'POST',
url:baseurl+'Employee/loadData',
data:{pageNum:pageNum},
dataType: 'json',
success: function(json) {
jQuery('#pagination_page_link').html(json.page_links);
paginationData(json.employeeInfo);
}
});
}
// pagination data
function paginationData(data) {
jQuery('#employeeList tbody').empty();
for(key in data) {
var empRow = "<tr>";
empRow += "<td>"+ data[key].name +"</td>";
empRow += "<td>"+ data[key].email +"</td>"
empRow += "<td>"+ data[key].salary +"</td>"
empRow += "<td>"+ data[key].age +"</td>"
empRow += "</tr>";
jQuery('#employeeList tbody').append(empRow);
}
}
});
</script>
Example 3: