There are several ways to do this, but here is how I could do it using Codeigniter. It is assumed that all necessary configuration settings are performed correctly, including in application/config/config.php , application/config/database.php , application/config/routes.php and optionally application/config/autoload.php .
Using the Model / View / Controller template, multiple files are created. Firstly, the controller. This will be the default controller and will be Ko_web.php . In routes.php we need this setting: $route['default_controller'] = 'ko_web'; You can enter http://example.com and go to the ko_web controller, where the index() function will be activated.
/application/controllers/Ko_web.php
class Ko_web extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('postovi_model'); $this->load->helper('url'); //could and maybe should be 'autoloaded' } public function index() { $data = array(); //empty but $data is set just in case //get the first 10 rows of users $rows = $this->postovi_model->get_next_10(); if(isset($rows)) { //We got rows, make the html from them //FYI, The array key 'users' becomes the variable $users in the view $data['users'] = $rows; //the view is returned as a string of html fully //populated with rows of user data $data['users'] = $this->load->view('user_rows_view', $data, TRUE); } //Using method chaining here to load multiple views cause it cool and effcient $this->load //start the page with the reuseable header view file, passing page title too ->view('header_view', array('title' => "User Info")) //Next, put the rows in the grid structure //note that if $data['users'] is not set the resulting view will have no user rows ->view('user_grid_view', $data) //add closing html tags, and in this case the javascript ->view('page_close_view', $data); } public function load_more() { $offset = $this->input->post('offset'); if($offset) { $new_rows = $this->postovi_model->get_next_10($offset); if(isset($new_rows)) { $data['users'] = $new_rows; //this will return (echo) html to the ajax success function //CI takes care of making the correct response headers - sweet $this->load->view('user_rows_view', $data); } else { echo ""; //return an empty string } } } }
The index() function will load (up to) the first 10 lines of user information.
The model is quite simple, and only one function returns an array of string arrays.
/application/models/Postovi_model.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Postovi_model extends CI_Model { public function __construct() { parent::__construct(); $this->load->database(); } public function get_next_10($offset = 0) { $this->db->limit(10, $offset); $query = $this->db->get("postovi");
The model returns NULL if no rows are found. The controller checks this condition and responds accordingly.
Views are split into several files basically, so markup can be easily reused. In any case, the top of each page will have the same information.
app / views / header_view.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script> <script src="https://npmcdn.com/ packery@2.0 /dist/packery.pkgd.js"></script> <script src="src/jquery.keep-ratio.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'> <title><?= isset($title) ? $title : "KO web"; ?></title> </head> <body>
Pay attention to the possibility of passing the page title, but we have a decline if it is not passed.
The next view is the grid structure. There are two things here. First var $users . The controller created this data from another view that will be shown after that. The value of $users is the html string of the grid lines. If the $users parameter is set, it will be displayed in this view and, ultimately, in the browser.
The second thing to note is that I put the "Download more ..." button at the bottom of the grid. It is bound to javascript and initiates an ajax call. You can implement the scroll loader after making sure ajax is working.
/application/views/user_grid_view.php
<div class = "grid" id = "grids"> <div class = "grid-item grid-normal"> <div class = "grid_content"><img src = ""></div> <div class = "grid_title red">title</div> <div class = "content_grid" id='user-rows'> <?php if(isset($users)) { echo $users; } ?> </div> </div> <button type="button" id="more_rows">Load More...</button> </div>
The next view page that builds the rows of the grid item to display
/application/views/user_rows_view.php
<?php if(isset($users)) { foreach($users as $user) { <div id='<?= $user['ID']; ?>' class='grid-item <?= $user['shape']; ?>'> <div class='grid_content'><?= $user['img_holder']; ?></div> <div class='grid_title red'> <?= $user['naslovhj']; ?></div> </div> <?php } }
I hope that I correctly named the field names and understood the layout you wanted.
OK, the last view that has javascript and the corresponding html tags to close the web page.
/application/views/page_close_view.php
<script> $(document).ready(function () { var baseURL = <?= base_url(); ?>; var row_count; $('#more_rows').on('click', function () { //what the offset? row_count = $('.grid-item').length || 0; $.ajax({ type: "POST", url: baseURL + "Ko_web/load_more", data: {offset: row_count}, datatype: 'html', success: function (response) { if (response === "") { alert("No rows to show."); } else { $('#user-rows').append(response); } }, error: function (jqXHR, textStatus, errorThrown) { console.log(jqXHR, textStatus, errorThrown); //alert("your message here"); //$("#ea").html('There was an error updating the settings'); } }); }); }); /* * Note: I left out the remaineder of the javascript from your question * because it did not seem to pertain to the answer you seek. */ </script></body></html>
The script counts the number of lines on the screen, as determined by the "grid-item" class. I can’t check it, but I think that everything is correct. This number is passed to the controller, where it is used as an offset to query the database.
Since the controller returns a fully formed html, it is trivial to embed it in the DOM where it needs to go. I added id='user-rows' to the div that surrounds the content_grid to make it easier to find the desired insertion point.
This will create a ton of questions for which you will undoubtedly be. Here is the CodeIgniter Documentation that you already have but might be of interest to other readers.
There will be typos and, possibly, some syntax errors. But the logic should be pretty close, and the structure should be on CodeIgniter. Enjoy it!