PHP Codeigniter load data while Ajax Infinite scrolling Pagination

Contents

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.

Download

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.

Also Read This 👉 Add www subdomain to all Urls using Htaccess

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

Example

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.