The tutorial will help you to make AJAX Pagination like Google in CodeIgniter here i am creating controller file "Posts", Model file "Posts" and once view file "index" follow the below code to make pagination like google.
Following code to create database table for making ajax pagination using CodeIgniter.
Database structure:
-- phpMyAdmin SQL Dump
-- version 5.0.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Dec 28, 2020 at 02:47 AM
-- Server version: 10.4.17-MariaDB
-- PHP Version: 7.3.25
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `ci_tutorial`
--
-- --------------------------------------------------------
--
-- Table structure for table `myposts`
--
CREATE TABLE `myposts` (
`id` int(11) NOT NULL,
`title` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
`postdate` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
`category` varchar(250) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
--
-- Dumping data for table `myposts`
--
INSERT INTO `myposts` (`id`, `title`, `postdate`, `category`) VALUES
(66, 'Using htaccess to deny access to files and directories', '22-11-2020', ''),
(68, 'PUBG Mobile India Full Game Download Android And iOS', '22-11-2020', ''),
(69, 'Bluestacks - How to play mobile games in PC', '22-11-2020', ''),
(70, 'Avada - Website Builder For WordPress and WooCommerce download as free', '22-11-2020', ''),
(71, 'Download Farming Simulator 19 For Free 2020', '23-11-2020', ''),
(72, 'How To Download Free Grand Theft Auto V For PC', '23-11-2020', ''),
(73, 'How to download WhatsApp Desktop Or PC', '23-11-2020', ''),
(74, 'Pagination in Codeigniter With Bootstrap 4', '23-11-2020', ''),
(75, 'How To Use Phone by Google Caller ID and spam protection App', '23-11-2020', ''),
(76, 'Minecraft Caves and Clifs 1.17 Android Download', '24-11-2020', ''),
(77, 'PHP Date and Time - complete tutorial for beginners', '24-11-2020', ''),
(78, 'High-speed Net - Secret Jio APN Settings', '24-11-2020', ''),
(79, 'How to upload multiple files into CodeIgniter', '25-11-2020', ''),
(80, 'How to upload multiple files with JavaScript and PHP', '25-11-2020', ''),
(81, 'Crash Bandicoot 4 Its About Time Full Game For PC Free Download', '26-11-2020', ''),
(82, '5 Easy ways to make money online and quickly', '26-11-2020', ''),
(83, 'How to Complete 4000 Hours of Watch Time on YouTube This Year As A Small Creator', '26-11-2020', ''),
(84, 'Zip And Unzip Files in Windows Pc', '26-11-2020', ''),
(85, 'How To Create And Use Google Form', '26-11-2020', ''),
(86, 'How To Create A Paytm Account With KYC', '27-11-2020', ''),
(87, 'Fixnow - Plumbing HTML Template download as free', '27-11-2020', ''),
(88, 'Tips And Tricks to increase PC performance in Windows 10', '27-11-2020', ''),
(89, 'Error 0x80070002 - Windows Update', '27-11-2020', ''),
(90, 'How to stop automatic updates on Windows 10', '28-11-2020', ''),
(91, 'How to speed up your internet speed', '28-11-2020', ''),
(92, 'How to make your Facebook profile as private', '28-11-2020', ''),
(94, 'The most effective method to Import CSV file data to MySQL in CodeIgniter', '28-11-2020', ''),
(96, 'How to create and use UPI', '01-12-2020', ''),
(97, '2 Ways to activate Windows 10 FREE without additional software', '01-12-2020', ''),
(98, 'Jio Free Data Tricks 2021', '02-12-2020', ''),
(99, 'How To Download Among Us PC For Free', '02-12-2020', ''),
(100, 'How can I find out which graphics card I have in my PC', '02-12-2020', ''),
(101, 'How to Make Money with Your Blog in 2021', '02-12-2020', ''),
(102, 'How to Format USB Flash Drive Using CMD', '02-12-2020', ''),
(103, 'Troubleshoot problems updating Windows 10', '02-12-2020', ''),
(104, 'How to Create a Bootable Pendrive using cmd', '02-12-2020', ''),
(105, '15 best Android games on playstore', '03-12-2020', ''),
(107, 'OnePlus 8T buyers guide - Everything you need to know', '03-12-2020', ''),
(108, 'PUBG Mobile India Version Latest Update- APK Download LinksAvailable on Official Website', '03-12-2020', ''),
(109, '7 Ways to Improve Your Computer Performance', '03-12-2020', ''),
(110, 'Top 5 Product Review Website Rating Blog HTML5 Templates', '03-12-2020', ''),
(111, 'Top 5 best Android emulators for PC and Mac of 2021', '04-12-2020', ''),
(112, 'The best Android phones - January 2021', '04-12-2020', ''),
(114, 'Cybersecurity Insights Report On 5G release', '14-12-2020', ''),
(115, 'GOOGLE adds a list of new partners with BeyondCorp Alliance', '14-12-2020', ''),
(116, 'PUBG Mobile India Download Now Available Beta APK', '14-12-2020', ''),
(117, 'Very high resolution images free download', '14-12-2020', ''),
(118, 'What is Creative Commons', '15-12-2020', ''),
(119, 'What is a public domain', '15-12-2020', ''),
(120, 'What is royalty free', '15-12-2020', ''),
(121, '15 best Chromebook games from Google Play', '15-12-2020', ''),
(122, 'Organizations may fail to train their employees against Cybersecurity Threats', '16-12-2020', ''),
(123, 'One Identity Highlights Barriers to Adoption of Zero Trust Framework', '17-12-2020', ''),
(125, '5 YouTube tricks to help you raise revenue 50 percentage faster Instantly', '17-12-2020', ''),
(126, 'PUBG Mobile 2 global version beta update APK OBB download', '19-12-2020', ''),
(127, 'The 15 best Android apps available now', '19-12-2020', ''),
(128, 'Can not send or receive messages on your Android phone', '19-12-2020', ''),
(129, 'Full Galaxy S21 Ultra specs leak no in-box charger allegedly confirmed', '19-12-2020', ''),
(130, 'Google Camera Go now brings HDR to budget smartphones Updated', '19-12-2020', ''),
(131, 'Sony returns all Cyberpunk 2077 order renewals: Xbox and refunds for all', '19-12-2020', ''),
(132, 'How To Calculate CPC and CTR-Formulas', '20-12-2020', ''),
(133, 'How to move the mouse cursor with the keyboard in Windows', '20-12-2020', ''),
(135, 'Top 10 Indian Information Technology Companies', '21-12-2020', ''),
(136, 'Top Indian Information Technology Companies', '21-12-2020', ''),
(137, 'TOP MOST EXPENSIVE MOBILE PHONES IN THE WORD', '21-12-2020', ''),
(138, 'Best budget gaming headphones', '21-12-2020', ''),
(139, '10 WordPress Tips to Make Your Website Secure', '21-12-2020', ''),
(140, 'IPhone12 features How Apples snappy new magnet feature works', '21-12-2020', ''),
(141, 'How to Not Get Locked Out With Two-Factor Authentication', '21-12-2020', ''),
(142, '10 best reminder apps for Android', '21-12-2020', ''),
(143, 'BEST STORY-DRIVEN GAMES ON MOBILE', '23-12-2020', 'Mobile Games'),
(144, 'Best top 5 Smart TVs in India', '23-12-2020', ''),
(145, 'SEO-friendly URLs', '24-12-2020', 'SEO Tutorial'),
(146, 'What is Canonical Tag Or link SEO', '24-12-2020', 'SEO Tutorial'),
(147, 'How to Increase Website Traffic Tips and Tricks', '26-12-2020', 'SEO Tutorial');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `myposts`
--
ALTER TABLE `myposts`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `myposts`
--
ALTER TABLE `myposts`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=149;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
controllers/Posts.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Posts extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->helper('url');
// Load Pagination library
$this->load->library('pagination');
// Load model
$this->load->model('Post');
}
public function index(){
$this->load->view('posts/index');
}
public function loadRecord($rowno=0){
// Row per page
$rowperpage = 5;
// Row position
if($rowno != 0){
$rowno = ($rowno-1) * $rowperpage;
}
// All records count
$allcount = $this->Post->getrecordCount();
// Get records
$myposts_data = $this->Post->getData($rowno,$rowperpage);
// Pagination Configuration
$config['base_url'] = base_url().'Posts/loadRecord';
$config['use_page_numbers'] = TRUE;
$config['total_rows'] = $allcount;
$config['per_page'] = $rowperpage;
// Initialize
$this->pagination->initialize($config);
// Initialize $data Array
$data['pagination'] = $this->pagination->create_links();
$data['result'] = $myposts_data;
$data['row'] = $rowno;
echo json_encode($data);
}
}Models/Post.php
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
Class Post extends CI_Model {
public function __construct() {
parent::__construct();
}
// Fetch records
public function getData($rowno, $rowperpage) {
$this->db->select('*');
$this->db->from('myposts');
$this->db->limit($rowperpage, $rowno);
$query = $this->db->get();
return $query->result_array();
}
// Select total records
public function getrecordCount() {
$this->db->select('count(*) as allcount');
$this->db->from('myposts');
$query = $this->db->get();
$result = $query->result_array();
return $result[0]['allcount'];
}
}
views/posts/index.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<style>
a{
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Posts List -->
<table width='100%' style='border-collapse: collapse;' id='postsList'>
<thead>
<tr>
<th> <h3>My Posts</h3></th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- Paginate -->
<div style='margin-top: 10px;' 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() {
// Detect pagination click
$('#pagination').on('click', 'a', function(e) {
e.preventDefault();
var pageno = $(this).attr('data-ci-pagination-page');
loadPagination(pageno);
});
loadPagination(0);
// Load pagination
function loadPagination(pagno) {
$.ajax({
url: '<?php echo base_url() ?>Posts/loadRecord/' + pagno,
type: 'get',
dataType: 'json',
success: function(response) {
$('#pagination').html(response.pagination);
createTable(response.result, response.row);
}
});
}
// Create table list
function createTable(result, sno) {
sno = Number(sno);
$('#postsList tbody').empty();
for (index in result) {
var title = result[index].title;
var tr = "<tr>";
tr += "<td><a href='#' target='_blank' >" + title + "</a></td>";
tr += "</tr>";
$('#postsList tbody').append(tr);
}
}
});
</script>
</body>
</html>
#output:
Download source code
Are you facing problems in understanding this article? download source code now