Load more data on page scroll in PHP & jQuery

Pagination is one of the most frequently used features for web applications. Pagination is the process of dividing a document into discrete pages. In this post, We have share how to implement Load more data on page scroll using jQuery, Ajax and Codeigniter.

Whenever the user scrolls from top to the bottom of the page the user gets more results from database automatically. This is a very simple example, you can just copy paste and change according to your requirement.

Also Read : Ajax Pagination Using CodeIgniter and MySQL

Before started to implement the Load more data on page scroll using jQuery, Ajax and Codeigniter, look files structure:

load-data-on-page-scroll-using-jquery-and-codeigniter
- application
  - config
    - autoload.php
    - database.php
    - constants.php
    - routes.php
  - controllers
    - News.php
  - models
    - News_model.php
  - views
    - news
      - index.php
      - render.php
    - templates
      - header.php
      - footer.php
- system
- index.php
- assets
  - css

Step 1: Create the database and Table

For this tutorial, you need a MySQL database with the following table:

    --
    -- Table structure for table `news`
    --

    CREATE TABLE `news` (
      `id` int(11) NOT NULL,
      `name` varchar(255) NOT NULL,
      `title` varchar(255) DEFAULT NULL,
      `description` text NOT NULL,
      `created_date` varchar(12) NOT NULL,
      `user_pic` varchar(255) NOT NULL,
      `email` varchar(255) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

    --
    -- Indexes for table `news`
    --
    ALTER TABLE `news`
      ADD PRIMARY KEY (`id`);

    --
    -- AUTO_INCREMENT for table `news`
    --
    ALTER TABLE `news`
      MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

-- Table structure for table `news`

CREATE TABLE `news` (

`id` int(11) NOT NULL,

`name` varchar(255) NOT NULL,

`title` varchar(255) DEFAULT NULL,

`description` text NOT NULL,

`created_date` varchar(12) NOT NULL,

`user_pic` varchar(255) NOT NULL,

`email` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Indexes for table `news`

ALTER TABLE `news`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for table `news`

ALTER TABLE `news`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Step 2: Create Model

Create a model file named News_model.php inside “application/models” folder.

<?php
defined('BASEPATH') OR 
    exit('No direct script access allowed');
/**
 * Version: 1.0.0
 *
 * Description of News model
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *
 **/

// News class
class News_model extends CI_Model {
  // Declare variables
  private $_limit;
  private $_pageNumber;
  private $_offset;

  public function setLimit($limit) {
        $this->_limit = $limit;
    }

    public function setPageNumber($pageNumber) {
        $this->_pageNumber = $pageNumber;
    }

    public function setOffset($offset) {
        $this->_offset = $offset;
    }

  // Count all record of table "news" in database.
  public function getAllNewsCount() {
        $this->db->from('news');
        return $this->db->count_all_results();
    }
  // Fetch data according to per_page limit.
  public function newsList() {       
        $this->db->select(array('n.id', 'n.name', 'n.email', 'n.title', 'n.description', 'n.email', 'n.user_pic'));
        $this->db->from('news as n');          
        $this->db->limit($this->_limit, $this->_offset);
        $query = $this->db->get();
        return $query->result_array();
    }

}
?>

<?php

defined('BASEPATH') OR

exit('No direct script access allowed');

/**

* Version: 1.0.0

* Description of News model

* @author TechArise Team

* @email info@techarise.com

**/

// News class

class News_model extends CI_Model {

// Declare variables

private $_limit;

private $_pageNumber;

private $_offset;

public function setLimit($limit) {

$this->_limit = $limit;

}

public function setPageNumber($pageNumber) {

$this->_pageNumber = $pageNumber;

}

public function setOffset($offset) {

$this->_offset = $offset;

}

// Count all record of table "news" in database.

public function getAllNewsCount() {

$this->db->from('news');

return $this->db->count_all_results();

}

// Fetch data according to per_page limit.

public function newsList() {

$this->db->select(array('n.id', 'n.name', 'n.email', 'n.title', 'n.description', 'n.email', 'n.user_pic'));

$this->db->from('news as n');

$this->db->limit($this->_limit, $this->_offset);

$query = $this->db->get();

return $query->result_array();

}

Step 3: Create controllers

Create a controllers file named News.php inside “application/controllers” folder.

The News controller handles the calendar process.
__construct() – Loads the required library, helper and model.
index() – load news data.
loadData() – Ajax request and get news data.

<?php
defined('BASEPATH') OR 
  exit('No direct script access allowed');
/**
 * Version: 1.0.0
 *
 * Description of News Controller
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *
 **/

// News class
class News extends CI_Controller {
  //Load libraries in Constructor.
  public function __construct() {
        parent::__construct();        
        $this->load->library('pagination');
        $this->load->model('News_model', 'news');

    }
  // index method
  public function index() {
        $data['metaDescription'] = 'Load more data on page scroll using jQuery, Ajax and Codeigniter';
        $data['metaKeywords'] = 'Load more data on page scroll using jQuery, Ajax and Codeigniter';
        $data['title'] = "Load more data on page scroll using jQuery, Ajax and Codeigniter - TechArise";
        $data['breadcrumbs'] = array('Load more data on page scroll using jQuery, Ajax and Codeigniter' => '#');
        $this->load->view('news/index', $data);
    }
    // load data
    public function loadData() {
        $data = array();
        $config['total_rows'] = $this->news->getAllNewsCount();
        $this->news->setLimit($this->input->post('limit'));
        $this->news->setOffset($this->input->post('start'));
        $data['dataInfo'] = $this->news->newsList();       
        $this->output->set_header('Content-Type: application/json');
        $this->load->view('news/render', $data);
    }
}
?>

<?php

defined('BASEPATH') OR

exit('No direct script access allowed');

/**

* Version: 1.0.0

* Description of News Controller

* @author TechArise Team

* @email info@techarise.com

**/

// News class

class News extends CI_Controller {

//Load libraries in Constructor.

public function __construct() {

parent::__construct();

$this->load->library('pagination');

$this->load->model('News_model', 'news');

}

// index method

public function index() {

$data['metaDescription'] = 'Load more data on page scroll using jQuery, Ajax and Codeigniter';

$data['metaKeywords'] = 'Load more data on page scroll using jQuery, Ajax and Codeigniter';

$data['title'] = "Load more data on page scroll using jQuery, Ajax and Codeigniter - TechArise";

$data['breadcrumbs'] = array('Load more data on page scroll using jQuery, Ajax and Codeigniter' => '#');

$this->load->view('news/index', $data);

}

// load data

public function loadData() {

$data = array();

$config['total_rows'] = $this->news->getAllNewsCount();

$this->news->setLimit($this->input->post('limit'));

$this->news->setOffset($this->input->post('start'));

$data['dataInfo'] = $this->news->newsList();

$this->output->set_header('Content-Type: application/json');

$this->load->view('news/render', $data);

}

Step 4:Create a view(header)

Create a view file named header.php inside “application/views/templates” folder.

This view contains the header section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header section.

  <?php
  defined('BASEPATH') OR exit('No direct script access allowed');
  ?>
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title><?php print $title; ?></title>
    <link rel="icon" type="image/ico" href="<?php print HTTP_IMAGE_PATH; ?>favicon.ico">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <!-- Custom fonts for this template -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template -->
    <link href="<?php print HTTP_CSS_PATH; ?>style.css" rel="stylesheet">
  </head>
  <body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
    <div class="container">
      <a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="https://techarise.com">Home
                  <span class="sr-only">(current)</span>
                </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://techarise.com/php-free-script-demos/">Live Demo</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<?php

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

<!DOCTYPE html>

<head>

</head>

<body>

<a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>

</button>

<a class="nav-link" href="https://techarise.com">Home

<span class="sr-only">(current)</span>

</a>

</li>

</li>

</ul>

</div>

</nav>

Step 5: Create a view(footer)

Create a view file named footer.php inside “application/views/templates” folder.

This view contains the footer section of the webpage.

  <!-- Footer -->
    <footer class="footer bg-light footer-bg-dark">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
            <ul class="list-inline mb-2">
              <li class="list-inline-item">
                <a href="#">About</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Contact</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
            </ul>
            <p class="text-muted small mb-4 mb-lg-0">Copyright &copy;  2011 - <?php print date('Y', time());?> <a href="https://techarise.com/">TECHARISE.COM</a> All rights reserved.</p>
          </div>
          <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
            <ul class="list-inline mb-0">
              <li class="list-inline-item mr-3">
                <a href="#">
                  <i class="fab fa-facebook fa-2x fa-fw"></i>
                </a>
              </li>
              <li class="list-inline-item mr-3">
                <a href="#">
                  <i class="fab fa-twitter-square fa-2x fa-fw"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-instagram fa-2x fa-fw"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <script>
      var baseurl = "<?php print site_url();?>";
    </script>
    <!-- Bootstrap core JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>  
  </body>
  </html>

<a href="#">About</a>

</li>

<a href="#">Contact</a>

</li>

<a href="#">Terms of Use</a>

</li>

<a href="#">Privacy Policy</a>

</li>

</ul>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

var baseurl = "<?php print site_url();?>";

</script>

</body>

</html>

Step 6: Create views

Create a views file named index.php inside “application/views/news folder.

<?php $this->load->view('templates/header');?>
<style type="text/css">
.timeline-item {
  background-color: #fff;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 3px;
  padding: 12px;
  margin: 0 auto;
  max-width: 100%;
  min-height: 180px;
}
@keyframes placeHolderShimmer {
  0%{ background-position: -468px 0; }
  100%{ background-position: 468px 0; }
}
.animated-background {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: placeHolderShimmer;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative;
}
.background-masker {
  background: #fff;
  position: absolute;
}
.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
    top: 0;
    left: 40px;
    right: 0;
    height: 10px;
}
.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
    top: 10px;
    left: 40px;
    height: 8px;
    width: 10px;
}
.background-masker.header-bottom {
    top: 18px;
    height: 6px;
}
.background-masker.subheader-left,
.background-masker.subheader-right {
    top: 24px;
    height: 6px;
}
.background-masker.header-right,
.background-masker.subheader-right {
    width: auto;
    left: 35%;
    right: 0;
}
.background-masker.subheader-right {
    left: 45%;
}
.background-masker.subheader-bottom {
    top: 30px;
    height: 10px;
}
.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
    top: 40px;
    left: 0;
    right: 0;
    height: 6px;
}
.background-masker.content-top {
    height:20px;
}
.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
    width: auto;
    left: 30%;
    right: 0;
    top: 60px;
    height: 8px;
}
.background-masker.content-second-line  {
    top: 68px;
}
.background-masker.content-second-end {
    left: 80%;
    top: 74px;
}
.background-masker.content-third-line {
    top: 82px;
}
.background-masker.content-third-end {
    left: 90%;
    top: 88px;
  }
</style>
<section class="showcase">
  <div class="container">
    <div class="pb-2 mt-4 mb-2 border-bottom">
      <h2>Load more data on page scroll using jQuery, Ajax and Codeigniter</h2>
    </div>
    <div class="row">       
      <div class="col-md-12 gedf-main">
        <span id="load-data"></span>
        <span id="load-data-msg"></span>
      </div>       
    </div>
  </div>
</section>
<?php $this->load->view('templates/footer');?>
<script>
  jQuery(document).ready(function() {
    var limit = 5;
    var start = 0;
    var flag = "inactive";
    function placeHolderShimmer(limit) {
      var bindHTML = '';
      for(var counter=0; counter<limit; counter++) {
        bindHTML += '<div class="timeline-item">';
          bindHTML += '<div class="animated-background">';
            bindHTML += '<div class="background-masker header-top"></div>';
            bindHTML += '<div class="background-masker header-left"></div>';
            bindHTML += '<div class="background-masker header-right"></div>';
            bindHTML += '<div class="background-masker header-bottom"></div>';
            bindHTML += '<div class="background-masker subheader-left"></div>';
            bindHTML += '<div class="background-masker subheader-right"></div>';
            bindHTML += '<div class="background-masker subheader-bottom"></div>';
            bindHTML += '<div class="background-masker content-top"></div>';
            bindHTML += '<div class="background-masker content-first-end"></div>';
            bindHTML += '<div class="background-masker content-second-line"></div>';
            bindHTML += '<div class="background-masker content-second-end"></div>';
            bindHTML += '<div class="background-masker content-third-line"></div>';
            bindHTML += '<div class="background-masker content-third-end"></div>';
          bindHTML += '</div>';
        bindHTML += '</div>';
      }
      jQuery("#load-data-msg").html(bindHTML);
    }
    // call function
    placeHolderShimmer(limit);
    function getData(limit, start) {
      jQuery.ajax({
        url:"<?php echo base_url(); ?>news/loadData",
        method:"POST",
        data:{limit:limit, start:start},
        dataType: 'html',
        cache: false,
        success:function(html) {
          if(html == '')  {
            jQuery('span#load-data-msg').html('<div class="text-muted" style="font-weight:bold; font-size:18px; text-align:center;">No more result yet!</div>');
            flag = 'active';
          }  else {
            jQuery('span#load-data').append(html);
            jQuery('span#load-data-msg').html("");
            flag = 'inactive';
          }
        }
      })
    }
    if(flag == 'inactive') {
      flag = 'active';
      getData(limit, start);
    }
    jQuery(window).scroll(function() {
      if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery("span#load-data").height() && flag == 'inactive') {
        placeHolderShimmer(limit);
        flag = 'active';
        start = start + limit;
        setTimeout(function() {
          getData(limit, start);
        }, 1000);
      }
    });
  });
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

<?php $this->load->view('templates/header');?>

.timeline-item {

background-color: #fff;

border: 1px solid;

border-color: #e5e6e9 #dfe0e4 #d0d1d5;

border-radius: 3px;

padding: 12px;

margin: 0 auto;

max-width: 100%;

min-height: 180px;

}

@keyframes placeHolderShimmer {

0%{ background-position: -468px 0; }

100%{ background-position: 468px 0; }

}

.animated-background {

animation-duration: 1.5s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

animation-timing-function: linear;

animation-name: placeHolderShimmer;

background: #f6f7f8;

background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);

background-size: 800px 104px;

height: 96px;

position: relative;

}

.background-masker {

background: #fff;

position: absolute;

}

.background-masker.header-top,

.background-masker.header-bottom,

.background-masker.subheader-bottom {

top: 0;

left: 40px;

right: 0;

height: 10px;

}

.background-masker.header-left,

.background-masker.subheader-left,

.background-masker.header-right,

.background-masker.subheader-right {

top: 10px;

left: 40px;

height: 8px;

width: 10px;

}

.background-masker.header-bottom {

top: 18px;

height: 6px;

}

.background-masker.subheader-left,

.background-masker.subheader-right {

top: 24px;

height: 6px;

}

.background-masker.header-right,

.background-masker.subheader-right {

width: auto;

left: 35%;

right: 0;

}

.background-masker.subheader-right {

left: 45%;

}

.background-masker.subheader-bottom {

top: 30px;

height: 10px;

}

.background-masker.content-top,

.background-masker.content-second-line,

.background-masker.content-third-line,

.background-masker.content-second-end,

.background-masker.content-third-end,

.background-masker.content-first-end {

top: 40px;

left: 0;

right: 0;

height: 6px;

}

.background-masker.content-top {

height:20px;

}

.background-masker.content-first-end,

.background-masker.content-second-end,

.background-masker.content-third-end{

width: auto;

left: 30%;

right: 0;

top: 60px;

height: 8px;

}

.background-masker.content-second-line {

top: 68px;

}

.background-masker.content-second-end {

left: 80%;

top: 74px;

}

.background-masker.content-third-line {

top: 82px;

}

.background-masker.content-third-end {

left: 90%;

top: 88px;

}

</style>

<h2>Load more data on page scroll using jQuery, Ajax and Codeigniter</h2>

</div>

</div>

</section>

<?php $this->load->view('templates/footer');?>

jQuery(document).ready(function() {

var limit = 5;

var start = 0;

var flag = "inactive";

function placeHolderShimmer(limit) {

var bindHTML = '';

for(var counter=0; counter<limit; counter++) {

bindHTML += '<div class="timeline-item">';

bindHTML += '<div class="animated-background">';

bindHTML += '<div class="background-masker header-top"></div>';

bindHTML += '<div class="background-masker header-left"></div>';

bindHTML += '<div class="background-masker header-right"></div>';

bindHTML += '<div class="background-masker header-bottom"></div>';

bindHTML += '<div class="background-masker subheader-left"></div>';

bindHTML += '<div class="background-masker subheader-right"></div>';

bindHTML += '<div class="background-masker subheader-bottom"></div>';

bindHTML += '<div class="background-masker content-top"></div>';

bindHTML += '<div class="background-masker content-first-end"></div>';

bindHTML += '<div class="background-masker content-second-line"></div>';

bindHTML += '<div class="background-masker content-second-end"></div>';

bindHTML += '<div class="background-masker content-third-line"></div>';

bindHTML += '<div class="background-masker content-third-end"></div>';

bindHTML += '</div>';

}

jQuery("#load-data-msg").html(bindHTML);

}

// call function

placeHolderShimmer(limit);

function getData(limit, start) {

jQuery.ajax({

url:"<?php echo base_url(); ?>news/loadData",

method:"POST",

data:{limit:limit, start:start},

dataType: 'html',

cache: false,

success:function(html) {

if(html == '') {

jQuery('span#load-data-msg').html('<div class="text-muted" style="font-weight:bold; font-size:18px; text-align:center;">No more result yet!</div>');

flag = 'active';

} else {

jQuery('span#load-data').append(html);

jQuery('span#load-data-msg').html("");

flag = 'inactive';

}

})

}

if(flag == 'inactive') {

flag = 'active';

getData(limit, start);

}

jQuery(window).scroll(function() {

if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery("span#load-data").height() && flag == 'inactive') {

placeHolderShimmer(limit);

flag = 'active';

start = start + limit;

setTimeout(function() {

getData(limit, start);

}, 1000);

}

});

</script>

Step 7: Create views

Create a views file named render.php inside “application/views/news folder.

  <?php if(!empty($dataInfo) && count($dataInfo)>0) { ?>
  <?php foreach($dataInfo as $key=>$element) { ?>
    <div class="card gedf-card" style="margin: 5px;">
      <div class="card-header">
          <div class="d-flex justify-content-between align-items-center">
              <div class="d-flex justify-content-between align-items-center">
                  <div class="mr-2">
                      <img class="rounded-circle" width="45" src="<?php echo HTTP_IMAGE_PATH.$element['user_pic'];?>" alt="">
                  </div>
                  <div class="ml-2">
                      <div class="h5 m-0">@<?php print $element['name'];?></div>
                      <div class="h7 text-muted"><?php print $element['email'];?></div>
                  </div>
              </div>
              <div> 
                  <div class="dropdown">
                      <button class="btn btn-link dropdown-toggle" type="button" id="gedf-drop1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <i class="fa fa-ellipsis-h"></i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="gedf-drop1">
                          <div class="h6 dropdown-header">Configuration</div>
                          <a class="dropdown-item" href="#">Save</a>
                          <a class="dropdown-item" href="#">Hide</a>
                          <a class="dropdown-item" href="#">Report</a>
                      </div>
                  </div>
              </div>
          </div>

      </div>
      <div class="card-body">
          <div class="text-muted h7 mb-2"> <i class="fa fa-clock-o"></i>10 min ago</div>
          <a class="card-link" href="#">
              <h5 class="card-title"><?php print $element['title'];?></h5>
          </a>
          <p class="card-text"><?php print $element['description'];?></p>
      </div>                    
    </div>
  <?php }?>  
<?php } ?>

<?php if(!empty($dataInfo) && count($dataInfo)>0) { ?>

<?php foreach($dataInfo as $key=>$element) { ?>

</div>

</div>

<div>

</button>

<div class="h6 dropdown-header">Configuration</div>

<a class="dropdown-item" href="#">Report</a>

</div>

</a>

</div>

<?php }?>

<?php } ?>

Step 8: Make Ajax Request and Load Data with Pagination

We will also need to use jQuery code in views index.php in "application/views/news" directory to load pagination and make Ajax request to load more records.

  <script>
  jQuery(document).ready(function() {
    var limit = 5;
    var start = 0;
    var flag = "inactive";
    function placeHolderShimmer(limit) {
      var bindHTML = '';
      for(var counter=0; counter<limit; counter++) {
        bindHTML += '<div class="timeline-item">';
          bindHTML += '<div class="animated-background">';
            bindHTML += '<div class="background-masker header-top"></div>';
            bindHTML += '<div class="background-masker header-left"></div>';
            bindHTML += '<div class="background-masker header-right"></div>';
            bindHTML += '<div class="background-masker header-bottom"></div>';
            bindHTML += '<div class="background-masker subheader-left"></div>';
            bindHTML += '<div class="background-masker subheader-right"></div>';
            bindHTML += '<div class="background-masker subheader-bottom"></div>';
            bindHTML += '<div class="background-masker content-top"></div>';
            bindHTML += '<div class="background-masker content-first-end"></div>';
            bindHTML += '<div class="background-masker content-second-line"></div>';
            bindHTML += '<div class="background-masker content-second-end"></div>';
            bindHTML += '<div class="background-masker content-third-line"></div>';
            bindHTML += '<div class="background-masker content-third-end"></div>';
          bindHTML += '</div>';
        bindHTML += '</div>';
      }
      jQuery("#load-data-msg").html(bindHTML);
    }
    // call function
    placeHolderShimmer(limit);
    function getData(limit, start) {
      jQuery.ajax({
        url:"<?php echo base_url(); ?>news/loadData",
        method:"POST",
        data:{limit:limit, start:start},
        dataType: 'html',
        cache: false,
        success:function(html) {
          if(html == '')  {
            jQuery('span#load-data-msg').html('<div class="text-muted" style="font-weight:bold; font-size:18px; text-align:center;">No more result yet!</div>');
            flag = 'active';
          }  else {
            jQuery('span#load-data').append(html);
            jQuery('span#load-data-msg').html("");
            flag = 'inactive';
          }
        }
      })
    }
    if(flag == 'inactive') {
      flag = 'active';
      getData(limit, start);
    }
    jQuery(window).scroll(function() {
      if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery("span#load-data").height() && flag == 'inactive') {
        placeHolderShimmer(limit);
        flag = 'active';
        start = start + limit;
        setTimeout(function() {
          getData(limit, start);
        }, 1000);
      }
    });
  });
</script>