Codeigniter 4 jQuery: Load More Data on Page Scroll Tutorial

In this definitive PHP Codeigniter 4 infinite scroll pagination example, you will explore how to integrate dynamic load more data on page scroll applying jQuery AJAX in Codeigniter 4 application from the absolute beginning.

Recently, I have been assigned a task to add infinite Scroll in the Codeigniter app. Ideally, this type of feature is extremely helpful in loading the data on a single web page in chunks.

You may call by many names like infinite scrolling pagination, endless scrolling pagination, auto-​pagination, lazy loading pagination, progressive loading pagination; it seems more or less the same.

In this Codeigniter 4 load more data tutorial, we will show you how to eloquently use jQuery AJAX to load more data on page scroll. We will create a list of data and dynamically retrieve the data on the Codeigniter application list of the data or records that will show or load on the page when the user starts scrolling.

In such a feature, the user won’t have to refresh or reload the entire web page, and the data loads in the web page, in conjunction with replacing with the HTML elements.

PHP Codeigniter 4 AJAX Load More Data On Page Scroll Example

  • Step 1: Download Codeigniter Project
  • Step 2: Update Database Credentials
  • Step 3: Create DB Table with Data
  • Step 4: Create Model File
  • Step 5: Register Route
  • Step 6: Make Controller File
  • Step 7: Create View File
  • Step 8: Run App in Browser

Download Codeigniter Project

The following url will land you on the official site, where you can download the latest version of the Codeigniter app.

https://www.codeigniter.com/download

Another method to download the app is by using the Composer command.

composer create-project codeigniter4/appstarter

Update Database Credentials

In order to connect the app to the database, you have to update the database credentials into the app/Config/Database.php file.

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'db_username',
        'password' => 'db_password',
        'database' => 'db_name',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'development'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

Create DB Table with Data

The create table command will create a client’s table simultaneously, add some random records into the same table, run the SQL query to form the DB table.

CREATE TABLE clients (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    client_name varchar(100) NOT NULL COMMENT 'Name',
    client_email varchar(255) NOT NULL COMMENT 'Email',
    created_at varchar(30) NOT NULL COMMENT 'Date',
    PRIMARY KEY (id)
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
 
 
INSERT INTO clients(id, client_name, client_email, created_at) VALUES
  (1, 'Hunter George', '[email protected]', '1949-10-6'),
  (2, 'Kyle Johnson', '[email protected]', '1980-8-12'),
  (3, 'Pat Vang', '[email protected]', '1961-10-10'),
  (4, 'Brad Bailey', '[email protected]', '1992-3-31'),
  (5, 'Hunter George', 'tyshawn19[email protected]', '1949-10-6'),
  (6, 'Kyle Johnson', '[email protected]', '1980-8-12'),
  (7, 'Pat Vang', '[email protected]', '1961-10-10'),
  (8, 'Brad Bailey', '[email protected]', '1992-3-31'),
  (9, 'Hunter George', '[email protected]', '1949-10-6'),
  (10, 'Kyle Johnson', '[email protected]', '1980-8-12'),
  (11, 'Pat Vang', '[email protected]', '1961-10-10'),
  (12, 'Brad Bailey', '[email protected]', '1992-3-31'),
  (13, 'Hunter George', '[email protected]', '1949-10-6'),
  (14, 'Kyle Johnson', '[email protected]', '1980-8-12'),
  (15, 'Pat Vang', '[email protected]', '1961-10-10'),
  (16, 'Brad Bailey', '[email protected]', '1992-3-31'),
  (17, 'Hunter George', '[email protected]', '1949-10-6'),
  (18, 'Kyle Johnson', '[email protected]', '1980-8-12'),
  (19, 'Pat Vang', '[email protected]', '1961-10-10'),
  (20, 'Brad Bailey', '[email protected]', '1992-3-31');

Create Model File

Next, create a model file; in this file, you will define the data being processed in conjunction with the Controller.

Update app/Models/ClientModel.php file.

<?php 

namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
 

class User extends Model
{

    protected $table = 'clients';
    protected $primaryKey = 'id';
    protected $allowedFields = [
      'client_name', 
      'client_email'
    ];

}

Register Route

You must add the route to load the view template and insert the following route inside the app/Config/Routes.php.

/*
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
*/

$routes->setDefaultController('ClientController');
$routes->get('/page-scroll-load-more', 'ClientController::index');

Make Controller File

Here comes the significant step, where you have to create the controller and define the functions to load the data from the database using paginate and load on page scroll in chunks.

Update code in app/Controllers/ClientController.php.

<?php

namespace App\Controllers;

use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
use App\Models\ClientModel;


class ClientController extends Controller {

    public function index() {
        helper(['form', 'url']);
        $this->clientModel = new ClientModel();
        $data = [
            'clients' => $this->clientModel->paginate(4),
            'pager' => $this->clientModel->pager
        ];
        return view('index', $data);
    }
 
   public function onScrollLoadMore(){
        $limit = 4; 
        $page = $limit * $this->request->getVar('page');
        $data['clients'] = $this->loadMoreData($page);
        return view('load_clients', $data);
   }
   
   function loadMoreData($limit){
        $db = new ClientModel();
        $builder = $db->select('*')->limit($limit)->get();
        return $builder->getResult();
   }    

} ?>

Create View File

As you remember, we said earlier we will load the data on page scroll in smaller chunks. For that, you have to create the main view file and secondary view file. The secondary view file will be loaded as the page user starts scrolling the page.

Add the provided code in app/Views/index.php file.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Ajax Load More Data on Page Scroll in Codeigniter 4</title>
	<style>
		body {
			height: 1000px;
		}
	</style>
</head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
    <div class="container">
        <?php if($clients): ?>
            <?php foreach($clients as $data): ?>
                <div class="card mb-3">
                   <h3><?php echo $data['client_name']; ?></h3>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
        <div id="loadMoreBlock"></div>
    </div>
</body>


<script>
    var baseURL = "<?php echo base_url(); ?>";
    var page = 1;
    var triggerScrollLoader = true;
    var isLoading = false;

    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 555) {
            if (isLoading == false) {
                isLoading = true;
                page++;
                if (triggerScrollLoader) {
                    initLoadMore(page);
                }
            }
        }
    });

    function initLoadMore(page) {
        $.ajax({
            url: baseURL+"/ClientController/onScrollLoadMore?page=" + page,
            type: "GET",
            dataType: "html",
        }).done(function (data) {
            isLoading = false;
            if (data.length == 0) {
                triggerScrollLoader = false;
                $('#loader').hide();
                return;
            }
            $('#loader').hide();
            $('#loadMoreBlock').append(data).show('slow');
        }).fail(function (jqXHR, ajaxOptions, thrownError) {
            console.log('Nothing to display');
        });
    }
</script>

</html>

Create another view file, and insert the recommended code in app/Views/load_clients.php file.

<?php if($clients): ?>
    <?php foreach($clients as $data): ?>
        <div class="card mb-3">
            <h3><?php echo $data->client_name; ?></h3>
        </div>
    <?php endforeach; ?>
<?php endif; ?>

Run App in Browser

This final step shows you how to start the Codeigniter development server, execute the provided command.

Use the suggested url to test the load of more data on page scroll functionality.

php spark serve
http://localhost:8080/page-scroll-load-more

Codeigniter 4 jQuery: Load More Data on Page Scroll Tutorial

Conclusion

In this Codeigniter 4 AJAX load more data on page scroll tutorial, we saw how to profoundly implement infinite Scroll in Codeigniter app using the jQuery AJAX.

Learned how to take the help of JavaScript to add interactivity to the load more on page scroll functionality.

As per the common notion, Infinite Scroll is best when you have excessive content, and you want your users to explore content seamlessly, and it is mainly suited on mobile devices.