PHP Codeigniter load data while Ajax Infinite scrolling Pagination
In this Post We Will Explain About is PHP Codeigniter load data while Ajax Infinite scrolling Pagination With Example and Demo.
Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to load data while scrolling page down with jquery and PHP
In this post we will show you Best way to implement load data while scrolling page down with jquery and codeigniter, hear for How to PHP Codeigniter – Ajax Infinite Scroll Pagination Example with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Phase 1: Download Fresh Codeigniter 3
In First of all step you will create download fresh and latest version of simple Codeigniter 3 version, so if you any haven’t no download yet steps then download data from here : offical site like as a Download Codeigniter 3 Below.
https://codeigniter.com/download
Phase 2: Create Database and Configuration
CREATE TABLE IF NOT EXISTS `customers` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `livedesc` text COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;
application/config/database.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); $active_group = 'default'; $query_builder = TRUE; $db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'live24u', 'password' => '[email protected]$8554', 'database' => 'mylivedatabase', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );
Phase 3: Add Route
application/config/routes.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); $route['default_controller'] = 'welcome'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE; $route['live-cust'] = 'LiveAjaxCtrl';
Phase 4: Create Controller
application/controllers/LiveAjaxCtrl.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class LiveAjaxCtrl extends CI_Controller { private $perPage = 5; public function index() { $this->load->database(); $count = $this->db->get('customers')->num_rows(); if(!empty($this->input->get("live_page"))){ $start = ceil($this->input->get("live_page") * $this->perPage); $sql_query = $this->db->limit($start, $this->perPage)->get("customers"); $data['customers'] = $sql_query->result(); $result = $this->load->view('data', $data); echo json_encode($result); }else{ $sql_query = $this->db->limit(5, $this->perPage)->get("customers"); $data['customers'] = $sql_query->result(); $this->load->view('live-post', $data); } } }
Phase 5: Create View Files
live-post.php: In this file, we will display layout with infinite ajax jquery.
data_live.php: In this file, we manage customers table data foreach, so we have to just manage customers data here.
application/views/live-post.php
<!DOCTYPE html> <html> <head> <title>created by Pakainfo.com : Codeigniter infinite scroll with pagination</title> <script src="jquery/1.9.1/jquery.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <style type="text/css"> .live-ajax{ background: #e1e1e1; padding: 20px 10px; width: 100%; } </style> </head> <body> <div class="container"> <h2 class="text-center">Codeigniter simple infinite scroll with pagination</h2> <br/> <div class="col-md-12" id="cust-data"> <?php $this->load->view('data', $customers); ?> </div> </div> <div class="live-ajax text-center" style="display:none"> <p><img src="https://www.pakainfo.com/plugin/loader.gif">Loading row More cust</p> </div> <script type="text/javascript"> var live_page = 1; $(window).scroll(function() { if($(window).scrollTop() + $(window).height() >= $(document).height()) { live_page++; live_loadmore(live_page); } }); function live_loadmore(live_page){ $.ajax( { url: '?live_page=' + live_page, type: "get", beforeSend: function() { $('.live-ajax').show(); } }) .done(function(data) { if(data == " "){ $('.live-ajax').html("No any more row records found"); return; } $('.live-ajax').hide(); $("#cust-data").append(data); }) .fail(function(jqXHR, ajaxOptions, thrownError) { alert('Pakainfo.com server not responding...'); }); } </script> </body> </html>
application/views/data_live.php
<?php foreach($customers as $cust){ ?> <div> <h3><a href=""><?php echo $cust->title ?></a></h3> <p><?php echo $cust->livedesc ?></p> <div class="text-right"> <button class="btn btn-success">Read More</button> </div> <hr style="margin-top:15px;"> </div> <?php } ?>
php -S localhost:8000
http://localhost:8000/live-cust
I hope you have Got load data while scrolling page down with jquery and codeigniter And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.