Infinite scroll pagination using codeigniter jquery and ajax

In this tutorial, we are going to learn how to create infinite scroll pagination using Codeigniter jquery and ajax(Infinite scroll pagination using codeigniter example). we have seen on Facebook, Twitter or other websites on that automatically loaded content when scrolling down to the web page.

So you can follow the below steps and see our example for mouse scroll pagination in Codeigniter.

Overview

Create a Database and Table

Connect to Database

Get the limit data

Get the infinite data

Create a Database and Table

First of all for we will create a database and table. after then we will add dummy data in the table. here we take the products table and also added products related data into the product table. so you can see the below code.

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'codeigniter_pagination',
	'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
);

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'codeigniter_pagination',

'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

);

Connect to Database

Here in this step, we will open database.php file in the config directory and some changes in this file like as hostname, database username, database password, and database name.

Get the limit data

Here in this step, we have to need limited data for display data. so we are displaying 10 data per rows. for that, we will take a constant variable so we can display 10 data per rows. now here we will take two hidden inputs fields for the current row position and the total number of row

So you can see our index method code for the first time get rows records.

 public function index() {
        $row= 0;
        $row_per_page = 10;
        $all_product_count = $this->Product_model->all_product_count();
        //echo $all_product_count; die;
        $data_proudct = $this->Product_model->get_product($row,$row_per_page);
        $data['products'] =$data_proudct;
        $data['all_product_count'] =$all_product_count;
        $this->load->view('product', $data);
    }

public function index() {

$row= 0;

$row_per_page = 10;

$all_product_count = $this->Product_model->all_product_count();

//echo $all_product_count; die;

$data_proudct = $this->Product_model->get_product($row,$row_per_page);

$data['products'] =$data_proudct;

$data['all_product_count'] =$all_product_count;

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

}

Get the infinite data

Here in this step, we have used some functions. you can see it.

$(window).scrollTop() function when scroll then it will return current vertical position.

$(document).height() function return height of the document.

$(window).height() function return pixel value of the height of the (browser) window.

When we scroll down if the current position and bottom position are the same then it will be passed next current row data using ajax and call into the pagination method. after it will be helpful for getting limit data into the query.

    public function pagination(){
        $row = $_POST['row'];
        $row_per_page = 10;
        $data_proudct = $this->Product_model->get_product($row,$row_per_page);

        $html ='';
        foreach ($data_proudct as $product){

                $html .= '<tr class="product" id="product_'.$product->id.'">';
                $html .= '<td>'.$product->title.'</td>';
                $html .= '<td>'.$product->description.'</td>';
                $html .= '<td>'.$product->price.'</td>';
                $html .= '<td>'.$product->created_at.'</td>';
                $html .= '</tr>';
        }
        echo $html;
    }

public function pagination(){

$row = $_POST['row'];

$row_per_page = 10;

$data_proudct = $this->Product_model->get_product($row,$row_per_page);

$html ='';

foreach ($data_proudct as $product){

$html .= '<tr class="product" id="product_'.$product->id.'">';

$html .= '<td>'.$product->title.'</td>';

$html .= '<td>'.$product->description.'</td>';

$html .= '<td>'.$product->price.'</td>';

$html .= '<td>'.$product->created_at.'</td>';

$html .= '</tr>';

}

echo $html;

}

so you can see our full code.

views/product.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Infinite scroll pagination using codeigniter jquery and ajax - Web Programming Tutorials</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function(){

            $(window).scroll(function(){

                var position = $(window).scrollTop();
                var bottom = $(document).height() - $(window).height();

                if( position == bottom ){
                    var row = Number($('#row').val());
                    var allcount = Number($('#all_product_count').val());
                    var rowperpage = 10;
                    row = row + rowperpage;

                    if(row <= allcount){
                        $('.ajax-load').show();
                        var url = "<?php echo base_url(); ?>index.php/welcome/pagination";
                        $('#row').val(row);
                        $.ajax({
                            url: url,
                            type: 'post',
                            data: {row:row},
                            success: function(response){
                                $('.ajax-load').hide();
                                $(".product:last").after(response).show().fadeIn("slow");
                            }
                        });
                    }
                    else
                    {
                        $('#remove').remove();
                        $(".product:last").after('<tr id="remove"><td colspan="4" style="text-align: center;"><b>No Data Available</b></td></tr>');

                    }
                }
            });
        });
    </script>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            border: 1px solid #ddd;
        }

        th,td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even){background-color: #f2f2f2}
    </style>
</head>
<body>

<div class="container">
    <h2>Product Table</h2>
    <div style="overflow-x:auto;">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Product Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>Create</th>
            </tr>
            </thead>
            <tbody>
            <?php
            foreach ($products as $product){
            ?>
            <tr class="product" id="product_<?php echo $product->id; ?>">
                <td><?php echo $product->title; ?></td>
                <td><?php echo $product->description; ?></td>
                <td><?php echo $product->price; ?></td>
                <td><?php echo $product->created_at; ?></td>
            </tr>
            <?php } ?>
            </tbody>
        </table>
        <input type="hidden" id="row" value="0">
        <input type="hidden" id="all_product_count" value="<?php echo $all_product_count; ?>">
    </div>
    <div class="row ajax-load" style="display: none;">
        <div class="col-lg-12" style="text-align: center;"><img width="100" height="100" src="https://www.primebldg.com/wp-content/uploads/2017/09/ajax-loader.gif"></div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Infinite scroll pagination using codeigniter jquery and ajax - Web Programming Tutorials</title>

$(document).ready(function(){

$(window).scroll(function(){

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();

if( position == bottom ){

var row = Number($('#row').val());

var allcount = Number($('#all_product_count').val());

var rowperpage = 10;

row = row + rowperpage;

if(row <= allcount){

$('.ajax-load').show();

var url = "<?php echo base_url(); ?>index.php/welcome/pagination";

$('#row').val(row);

$.ajax({

url: url,

type: 'post',

data: {row:row},

success: function(response){

$('.ajax-load').hide();

$(".product:last").after(response).show().fadeIn("slow");

}

});

}

else

{

$('#remove').remove();

$(".product:last").after('<tr id="remove"><td colspan="4" style="text-align: center;"><b>No Data Available</b></td></tr>');

}

});

</script>

<style>

table {

border-collapse: collapse;

border-spacing: 0;

width: 100%;

border: 1px solid #ddd;

}

th,td {

text-align: left;

padding: 8px;

}

tr:nth-child(even){background-color: #f2f2f2}

</style>

</head>

<body>

<h2>Product Table</h2>

<thead>

<tr>

<th>Product Name</th>

<th>Description</th>

<th>Price</th>

<th>Create</th>

</tr>

</thead>

<tbody>

<?php

foreach ($products as $product){

<td><?php echo $product->title; ?></td>

<td><?php echo $product->description; ?></td>

<td><?php echo $product->price; ?></td>

<td><?php echo $product->created_at; ?></td>

</tr>

<?php } ?>

</tbody>

</table>

</div>

</div>

</body>

</html>

controllers/Welcome.php

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

class Welcome extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see https://codeigniter.com/user_guide/general/urls.html
	 */
	
	
	function __construct() {
        parent::__construct();
        $this->load->model("Product_model");
    }

    public function index() {
        $row= 0;
        $row_per_page = 10;
        $all_product_count = $this->Product_model->all_product_count();
        //echo $all_product_count; die;
        $data_proudct = $this->Product_model->get_product($row,$row_per_page);
        $data['products'] =$data_proudct;
        $data['all_product_count'] =$all_product_count;
        $this->load->view('product', $data);
    }

    public function pagination(){
        $row = $_POST['row'];
        $row_per_page = 10;
        $data_proudct = $this->Product_model->get_product($row,$row_per_page);

        $html ='';
        foreach ($data_proudct as $product){

                $html .= '<tr class="product" id="product_'.$product->id.'">';
                $html .= '<td>'.$product->title.'</td>';
                $html .= '<td>'.$product->description.'</td>';
                $html .= '<td>'.$product->price.'</td>';
                $html .= '<td>'.$product->created_at.'</td>';
                $html .= '</tr>';
        }
        echo $html;

    }
}
?>

<?php

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

class Welcome extends CI_Controller {

/**

* Index Page for this controller.

* Maps to the following URL

* http://example.com/index.php/welcome

* - or -

* http://example.com/index.php/welcome/index

* - or -

* Since this controller is set as the default controller in

* config/routes.php, it's displayed at http://example.com/

* So any other public methods not prefixed with an underscore will

* map to /index.php/welcome/<method_name>

* @see https://codeigniter.com/user_guide/general/urls.html

function __construct() {

parent::__construct();

$this->load->model("Product_model");

}

public function index() {

$row= 0;

$row_per_page = 10;

$all_product_count = $this->Product_model->all_product_count();

//echo $all_product_count; die;

$data_proudct = $this->Product_model->get_product($row,$row_per_page);

$data['products'] =$data_proudct;

$data['all_product_count'] =$all_product_count;

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

}

public function pagination(){

$row = $_POST['row'];

$row_per_page = 10;

$data_proudct = $this->Product_model->get_product($row,$row_per_page);

$html ='';

foreach ($data_proudct as $product){

$html .= '<tr class="product" id="product_'.$product->id.'">';

$html .= '<td>'.$product->title.'</td>';

$html .= '<td>'.$product->description.'</td>';

$html .= '<td>'.$product->price.'</td>';

$html .= '<td>'.$product->created_at.'</td>';

$html .= '</tr>';

}

echo $html;

}

models/Product_model.php

<?php

class Product_model extends CI_Model {

    public function all_product_count(){
		
		$query = $this->db->query("SELECT * FROM products")->result();
        return count($query);
    }

    public function get_product($page,$row_per_page)
    {
        $query = $this->db->query("SELECT * FROM products ORDER BY id desc limit ".$page.",".$row_per_page);
        return $query->result();
    }

}
?>

<?php

class Product_model extends CI_Model {

public function all_product_count(){

$query = $this->db->query("SELECT * FROM products")->result();

return count($query);

}

public function get_product($page,$row_per_page)

{

$query = $this->db->query("SELECT * FROM products ORDER BY id desc limit ".$page.",".$row_per_page);

return $query->result();

}