Codeigniter - Load more data on page scroll using jQuery and Ajax

Codeigniter

Nicesnippets

5788

01-12-2020


Now let's see example of how to implement load more feature or you can say infinite scroll in Codeignite app. In this article i will show you load more data on page scroll using jquery and ajax in codeigniter. You don't have need to click anywhere to load data because data is loading on page scroll automatically from MySQl database.

In this post example, i will write simple jQuery ajax code for load more data on infinity page scroll in Codeigniter using jQuery and ajax app.

You have to just follow bellow few step and you will get infinite scroll in your Codeigniter application. After finish all those step you will be find output as like bellow preview:

Step 1 : Database configuration


In the first step, I will create a new database for this example called tutorials and create new table posts in this tutorials database.

CREATE TABLE `posts` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`title` varchar(255) NOT NULL,

`description` text NOT NULL,

`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1

Now I have to modify the database configuration file with updated details in the Codeigniter application.

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' => 'root',

'password' => '',

'database' => 'tutorials',

'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

);

Step 2 : Add Route

In this step, I will add one route in the route file to manage infinite scroll on data list.

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['post'] = 'PostController';

Step 3 : Create Controller

In this step, I will create a controller "PostController" to manage post data with index method.

application/controllers/PostController.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class PostController extends CI_Controller {

private $perPage = 10;

public function index()

{

$this->load->database();

$count = $this->db->get('posts')->num_rows();

if(!empty($this->input->get("page"))){

$start = $this->input->get("page") * $this->perPage;

$query = $this->db->limit($start, $this->perPage)->get("posts");

$data['posts'] = $query->result();

$data['count']=$count;

$result = $this->load->view('ajax_post', $data);

echo json_encode($result);

}else{

$query = $this->db->limit($this->perPage,0)->get("posts");

$data['posts'] = $query->result();

$data['count']=$count;

$this->load->view('post', $data);

}

}

}

Step 4: Create View Files

In this step, I will create here two files, first one for the normal page load view with ajax query and another for ajax page load view.

application/views/post.php

<!DOCTYPE html>

<html>

<head>

<title>PHP Codeigniter load more data on page scroll</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

<div class="container">

<h2 class="text-center">PHP Codeigniter 3 - load more data with infinite scroll pagination</h2>

<br/>

<div class="col-md-12" id="ajax-post-container">

<?php

$this->load->view('ajax_post', $posts);

?>

</div>

</div>

<div class="loader" style="display:none">

<img src="<?php print base_url('loader.gif')?>">

</div>

<script type="text/javascript">

var page = 1;

var total_pages = <?php print $count?>;

$(window).scroll(function() {

if($(window).scrollTop() + $(window).height() >= $(document).height()) {

page++;

if(page < total_pages) {

loadMore(page);

}

}

});

function loadMore(page){

$.ajax({

url: '?page=' + page,

type: "GET",

beforeSend: function()

{

$('.loader').show();

}

})

.done(function(data)

{

$('.loader').hide();

$("#ajax-post-container").append(data);

});

}

</script>

</body>

</html>

application/views/ajax_post.php

<?php foreach($posts as $post){ ?>

<div>

<h3><a href=""><?php echo $post->title ?></a></h3>

<p><?php echo $post->description ?></p>

</div>

<?php } ?>

It will help you....


Recommended Posts