{"id":3348,"date":"2018-07-05T20:53:01","date_gmt":"2018-07-05T20:53:01","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3348"},"modified":"2020-02-24T16:35:38","modified_gmt":"2020-02-24T16:35:38","slug":"codeigniter-load-more-data-on-page-scroll-jquery-ajax","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/","title":{"rendered":"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax"},"content":{"rendered":"<p><b>Infinite scroll<\/b> is the most user-friendly way to add pagination in the data list. With infinite scroll pagination, the user does not need to click the link to load data from the database. Rather than the dynamic content is loaded from the server automatically while scrolling page down. Infinite Scrolling is the best replacement of links pagination for autoloading more data from the database.<\/p>\n<p>Generally, <a href=\"https:\/\/www.codexworld.com\/codeigniter-pagination-library-bootstrap\/\">CodeIgniter Pagination library<\/a> is used to add pagination links to the data list. But if you want to implement an advanced pagination functionality, infinite scroll is the best option. Load data on scroll functionality can be easily implemented using jQuery and Ajax. When the user reaches the end of the web page, the more data is retrieved from the MySQL database and additional content is loaded in the web page while scrolling the page down. In this tutorial, we will show you how to <b>load data on page scroll in CodeIgniter<\/b> using jQuery and Ajax.<\/p>\n<p>In the example code, we will implement infinite scroll pagination for the posts data list in CodeIgniter application.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Fetch and list the post data from the database.<\/li>\n<li>Detect page scroll down using jQuery.<\/li>\n<li>Make an AJAX request to load data from the database.<\/li>\n<li>Display more post data under the previously loaded data.<\/li>\n<\/ul>\n<h2>Create Database Table<\/h2>\n<p>To store the posts data a table is required in the database. The following SQL creates a <code>posts<\/code> table with some basic fields in the MySQL database.<\/p>\n<pre><span style=\"color:#794938\">CREATE<\/span> <span style=\"color:#794938\">TABLE<\/span> `<span style=\"color:#bf4f24\">posts<\/span>` (\r\n <span style=\"color:#0b6125\">`id`<\/span> <span style=\"color:#a71d5d;font-style:italic\">int<\/span>(<span style=\"color:#811f24;font-weight:700\">11<\/span>) <span style=\"color:#794938\">NOT NULL<\/span> AUTO_INCREMENT,\r\n <span style=\"color:#0b6125\">`title`<\/span> <span style=\"color:#a71d5d;font-style:italic\">varchar<\/span>(<span style=\"color:#811f24;font-weight:700\">255<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`content`<\/span> <span style=\"color:#a71d5d;font-style:italic\">text<\/span> COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`created`<\/span> datetime <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`modified`<\/span> datetime <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`status`<\/span> enum(<span style=\"color:#0b6125\">'1'<\/span>,<span style=\"color:#0b6125\">'0'<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span> DEFAULT <span style=\"color:#0b6125\">'1'<\/span> COMMENT <span style=\"color:#0b6125\">'1=Active, 0=Inactive'<\/span>,\r\n <span style=\"color:#a71d5d;font-style:italic\">PRIMARY KEY<\/span> (<span style=\"color:#0b6125\">`id`<\/span>)\r\n) ENGINE<span style=\"color:#794938\">=<\/span>InnoDB DEFAULT CHARSET<span style=\"color:#794938\">=<\/span>utf8 COLLATE<span style=\"color:#794938\">=<\/span>utf8_unicode_ci;\r\n<\/pre>\n<h2>Controller (Posts.php)<\/h2>\n<p>The Posts controller contains 3 functions, <code>__construct()<\/code>, <code>index()<\/code>, and <code>loadMoreData()<\/code>.<br \/>\n<b>__construct():<\/b><\/p>\n<ul class=\"bullet_disk_list\">\n<li>Load Post model to fetch data from the database.<\/li>\n<li>Set per page data list limit.<\/li>\n<\/ul>\n<p><b>index():<\/b><\/p>\n<ul class=\"bullet_disk_list\">\n<li>Fetch posts data from the database using getRows() function of Post model.<\/li>\n<li>Pass the post data to view and load this view.<\/li>\n<\/ul>\n<p><b>loadMoreData():<\/b> This method is called by the Ajax request to load more data.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Get the ID of the last displayed post.<\/li>\n<li>Fetch the posts data based on the last post ID.<\/li>\n<li>Pass the post data to the view to load more post data.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php&nbsp;defined<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'BASEPATH'<\/span><span style=\"color: #007700\">)&nbsp;OR&nbsp;exit(<\/span><span style=\"color: #DD0000\">'No&nbsp;direct&nbsp;script&nbsp;access&nbsp;allowed'<\/span><span style=\"color: #007700\">);<br \/><br \/>class&nbsp;<\/span><span style=\"color: #0000BB\">Posts&nbsp;<\/span><span style=\"color: #007700\">extends&nbsp;<\/span><span style=\"color: #0000BB\">CI_Controller&nbsp;<\/span><span style=\"color: #007700\">{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;<\/span><span style=\"color: #0000BB\">__construct<\/span><span style=\"color: #007700\">()&nbsp;{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">parent<\/span><span style=\"color: #007700\">::<\/span><span style=\"color: #0000BB\">__construct<\/span><span style=\"color: #007700\">();<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Load&nbsp;post&nbsp;model<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">load<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">model<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'post'<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Per&nbsp;page&nbsp;limit<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">perPage&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">4<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;<\/span><span style=\"color: #0000BB\">index<\/span><span style=\"color: #007700\">(){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array();<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;posts&nbsp;data&nbsp;from&nbsp;the&nbsp;database<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'order_by'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">\"id&nbsp;DESC\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'limit'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">perPage<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'posts'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">post<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">getRows<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Pass&nbsp;the&nbsp;post&nbsp;data&nbsp;to&nbsp;view<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">load<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">view<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'posts\/index'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;<\/span><span style=\"color: #0000BB\">loadMoreData<\/span><span style=\"color: #007700\">(){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array();<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;last&nbsp;post&nbsp;ID<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$lastID&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">input<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">post<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;post&nbsp;rows&nbsp;num<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'where'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;array(<\/span><span style=\"color: #DD0000\">'id&nbsp;&lt;'<\/span><span style=\"color: #007700\">=&gt;<\/span><span style=\"color: #0000BB\">$lastID<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'returnType'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'count'<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'postNum'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">post<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">getRows<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;posts&nbsp;data&nbsp;from&nbsp;the&nbsp;database<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'returnType'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'order_by'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">\"id&nbsp;DESC\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'limit'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">perPage<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'posts'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">post<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">getRows<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'postLimit'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">perPage<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Pass&nbsp;data&nbsp;to&nbsp;view<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">load<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">view<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'posts\/load-more-data'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">false<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>}<\/span><\/pre>\n<h2>Model (Post.php)<\/h2>\n<p>The Post model handles the database related work.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><b>__construct()<\/b> &#8211; Specify the table name of the database.<\/li>\n<li><b>getRows()<\/b> &#8211; Fetch the posts data from the database based on the condition and returns as an array.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">if&nbsp;(&nbsp;!&nbsp;<\/span><span style=\"color: #0000BB\">defined<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'BASEPATH'<\/span><span style=\"color: #007700\">))&nbsp;exit(<\/span><span style=\"color: #DD0000\">'No&nbsp;direct&nbsp;script&nbsp;access&nbsp;allowed'<\/span><span style=\"color: #007700\">);<br \/><br \/>class&nbsp;<\/span><span style=\"color: #0000BB\">Post&nbsp;<\/span><span style=\"color: #007700\">extends&nbsp;<\/span><span style=\"color: #0000BB\">CI_Model<\/span><span style=\"color: #007700\">{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;<\/span><span style=\"color: #0000BB\">__construct<\/span><span style=\"color: #007700\">()&nbsp;{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">tblName&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'posts'<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/*<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Fetch&nbsp;posts&nbsp;data&nbsp;from&nbsp;the&nbsp;database<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;id&nbsp;returns&nbsp;a&nbsp;single&nbsp;record&nbsp;if&nbsp;specified,&nbsp;otherwise&nbsp;all&nbsp;records<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*\/<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">function&nbsp;<\/span><span style=\"color: #0000BB\">getRows<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$params&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array()){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">select<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'*'<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">from<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">tblName<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/fetch&nbsp;data&nbsp;by&nbsp;conditions<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"where\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreach&nbsp;(<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'where'<\/span><span style=\"color: #007700\">]&nbsp;as&nbsp;<\/span><span style=\"color: #0000BB\">$key&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$value<\/span><span style=\"color: #007700\">){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">where<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$value<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"order_by\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">order_by<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'order_by'<\/span><span style=\"color: #007700\">]);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"id\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">where<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">]);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">get<\/span><span style=\"color: #007700\">();<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">row_array<\/span><span style=\"color: #007700\">();<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/set&nbsp;start&nbsp;and&nbsp;limit<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"start\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"limit\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">limit<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'limit'<\/span><span style=\"color: #007700\">],<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'start'<\/span><span style=\"color: #007700\">]);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}elseif(!<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"start\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"limit\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">limit<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'limit'<\/span><span style=\"color: #007700\">]);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"returnType\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">$params<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'returnType'<\/span><span style=\"color: #007700\">]&nbsp;==&nbsp;<\/span><span style=\"color: #DD0000\">'count'<\/span><span style=\"color: #007700\">){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">count_all_results<\/span><span style=\"color: #007700\">();<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">get<\/span><span style=\"color: #007700\">();<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">num_rows<\/span><span style=\"color: #007700\">()&nbsp;&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">result_array<\/span><span style=\"color: #007700\">():<\/span><span style=\"color: #0000BB\">FALSE<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/><br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/return&nbsp;fetched&nbsp;data<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">return&nbsp;<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>}<\/span><\/pre>\n<h2>View (posts\/)<\/h2>\n<p>Two view files are used, index.php and load-more-data.php.<\/p>\n<p><b><code>index.php:<\/code><\/b><br \/>\nInitially, a limited number of posts data is fetched from the database and listed on the web page. Additional data will be retrieved via Ajax while page scrolling down.<\/p>\n<p>At first, load the jQuery library.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<p>The jQuery <b>scroll()<\/b> method is used to detect the page scroll and an Ajax request is initiated when the user scrolling page down. The last displayed post ID (<code>$lastID<\/code>) is sent via Ajax to the <code>loadMoreData()<\/code> method of Posts controller. Once the Ajax success method returns the more posts data, the content HTML will append to the posts list.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\/javascript\"<\/span>>\r\n<span style=\"color:#691c97\">$<\/span>(<span style=\"color:#691c97\">document<\/span>)<span style=\"color:#693a17\">.ready<\/span>(<span style=\"color:#a71d5d;font-style:italic\">function<\/span>(){\r\n    <span style=\"color:#691c97\">$<\/span>(<span style=\"color:#691c97\">window<\/span>)<span style=\"color:#693a17\">.scroll<\/span>(<span style=\"color:#a71d5d;font-style:italic\">function<\/span>(){\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> lastID <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.load-more<\/span>')<span style=\"color:#693a17\">.attr<\/span>(<span style=\"color:#0b6125\">'lastID'<\/span>);\r\n        <span style=\"color:#794938\">if<\/span>((<span style=\"color:#691c97\">$<\/span>(<span style=\"color:#691c97\">window<\/span>).scrollTop() <span style=\"color:#794938\">==<\/span> <span style=\"color:#691c97\">$<\/span>(<span style=\"color:#691c97\">document<\/span>)<span style=\"color:#693a17\">.height<\/span>() <span style=\"color:#794938\">-<\/span> <span style=\"color:#691c97\">$<\/span>(<span style=\"color:#691c97\">window<\/span>)<span style=\"color:#693a17\">.height<\/span>()) <span style=\"color:#794938\">&amp;<\/span><span style=\"color:#794938\">&amp;<\/span> (lastID <span style=\"color:#794938\">!<\/span><span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">0<\/span>)){\r\n            <span style=\"color:#794938\">$<\/span><span style=\"color:#693a17\">.ajax<\/span>({\r\n                type:<span style=\"color:#0b6125\">'POST'<\/span>,\r\n                url:<span style=\"color:#0b6125\">'<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">base_url<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'posts\/loadMoreData'<\/span><span style=\"color: #007700\">);&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>'<\/span>,\r\n                data:<span style=\"color:#0b6125\">'id='<\/span><span style=\"color:#794938\">+<\/span>lastID,\r\n                <span style=\"color:#bf4f24\">beforeSend<\/span>:<span style=\"color:#a71d5d;font-style:italic\">function<\/span>(){\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.load-more<\/span>')<span style=\"color:#693a17\">.show<\/span>();\r\n                },\r\n                <span style=\"color:#bf4f24\">success<\/span>:<span style=\"color:#a71d5d;font-style:italic\">function<\/span>(html){\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.load-more<\/span>').<span style=\"color:#693a17\">remove<\/span>();\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#postList<\/span>')<span style=\"color:#693a17\">.append<\/span>(html);\r\n                }\r\n            });\r\n        }\r\n    });\r\n});\r\n&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<p>The posts data that passed from the Posts controller are displayed in a list.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"postList\"<\/span>>\r\n    <span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$posts<\/span><span style=\"color: #007700\">)){&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$posts&nbsp;<\/span><span style=\"color: #007700\">as&nbsp;<\/span><span style=\"color: #0000BB\">$post<\/span><span style=\"color: #007700\">){&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n        &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"list-item\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">h2<\/span>><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$post<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'title'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>&lt;\/<span style=\"color:#bf4f24\">h2<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">p<\/span>><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$post<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'content'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n    <span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n        &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"load-more\"<\/span> <span style=\"color:#bf4f24\">lastID<\/span>=<span style=\"color:#0b6125\">\"<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$post<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\"<\/span> <span style=\"color:#bf4f24\">style<\/span>=<span style=\"color:#0b6125\">\"display: none;\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">img<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">base_url<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'assets\/images\/loading.gif'<\/span><span style=\"color: #007700\">);&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\"<\/span>\/> Loading more posts...\r\n        &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n    <span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}else{&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n        &lt;<span style=\"color:#bf4f24\">p<\/span>>Post(s) not available.&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n    <span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<p><b><code>load-more-data.php:<\/code><\/b><br \/>\nThis view appears while the user scrolling page down. It requested by the Ajax and loaded by the <code>loadMoreData()<\/code> method of Posts controller.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"postList\"<\/span>>\r\n    <span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$posts<\/span><span style=\"color: #007700\">)){&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$posts&nbsp;<\/span><span style=\"color: #007700\">as&nbsp;<\/span><span style=\"color: #0000BB\">$post<\/span><span style=\"color: #007700\">){&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n        &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"list-item\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">h2<\/span>><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$post<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'title'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>&lt;\/<span style=\"color:#bf4f24\">h2<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">p<\/span>><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$post<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'content'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n    <span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">$postNum&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$postLimit<\/span><span style=\"color: #007700\">){&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n        &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"load-more\"<\/span> <span style=\"color:#bf4f24\">lastID<\/span>=<span style=\"color:#0b6125\">\"<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$post<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\"<\/span> <span style=\"color:#bf4f24\">style<\/span>=<span style=\"color:#0b6125\">\"display: none;\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">img<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">base_url<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'assets\/images\/loading.gif'<\/span><span style=\"color: #007700\">);&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\"<\/span>\/> Loading more posts...\r\n        &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n    <span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}else{&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n        &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"load-more\"<\/span> <span style=\"color:#bf4f24\">lastID<\/span>=<span style=\"color:#0b6125\">\"0\"<\/span>>\r\n            That's All!\r\n        &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n    <span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>    \r\n<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}else{&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>    \r\n    &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"load-more\"<\/span> <span style=\"color:#bf4f24\">lastID<\/span>=<span style=\"color:#0b6125\">\"0\"<\/span>>\r\n            That's All!\r\n    &lt;\/<span style=\"color:#bf4f24\">div<\/span>>    \r\n<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n<\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/load-data-on-page-scroll-jquery-ajax-php-mysql\/\">Load Data on Page Scroll from MySQL Database using jQuery Ajax PHP<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>If you want to allow users to load more data without page refresh and provide a user-friendly interface for pagination in the CodeIgniter application, the Ajax infinite scroll definitely a better option. Load data on scroll can be easily integrated with jQuery and Ajax. Alternatively, Ajax pagination can be used to implement <a href=\"https:\/\/www.codexworld.com\/ajax-pagination-in-codeigniter-framework\/\">pagination without page refresh in CodeIgniter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Infinite scroll is the most user-friendly way to add pagination in the data list. With infinite scroll pagination, the user does not need to click the link to load data from the database. Rather than <\/p>\n","protected":false},"author":1,"featured_media":3359,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[8],"tags":[28,55,16,122,110],"class_list":["post-3348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeigniter","tag-ajax","tag-codeigniter","tag-jquery","tag-loadmore","tag-pagination","cat-8-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Load Data on Page Scroll in CodeIgniter using jQuery and Ajax - CodexWorld<\/title>\n<meta name=\"description\" content=\"CodeIgniter load more data on scroll - Infinite scroll pagination to load more data while scrolling page down in CodeIgniter using jQuery and Ajax. Example code to load more data without page refresh in the CodeIgniter application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"CodeIgniter load more data on scroll - Infinite scroll pagination to load more data while scrolling page down in CodeIgniter using jQuery and Ajax. Example code to load more data without page refresh in the CodeIgniter application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-05T20:53:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-24T16:35:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/07\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax\",\"datePublished\":\"2018-07-05T20:53:01+00:00\",\"dateModified\":\"2020-02-24T16:35:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/\"},\"wordCount\":592,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png\",\"keywords\":[\"Ajax\",\"CodeIgniter\",\"jQuery\",\"LoadMore\",\"Pagination\"],\"articleSection\":[\"CodeIgniter\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/\",\"name\":\"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png\",\"datePublished\":\"2018-07-05T20:53:01+00:00\",\"dateModified\":\"2020-02-24T16:35:38+00:00\",\"description\":\"CodeIgniter load more data on scroll - Infinite scroll pagination to load more data while scrolling page down in CodeIgniter using jQuery and Ajax. Example code to load more data without page refresh in the CodeIgniter application.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax - CodexWorld","description":"CodeIgniter load more data on scroll - Infinite scroll pagination to load more data while scrolling page down in CodeIgniter using jQuery and Ajax. Example code to load more data without page refresh in the CodeIgniter application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/","og_locale":"en_US","og_type":"article","og_title":"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax - CodexWorld","og_description":"CodeIgniter load more data on scroll - Infinite scroll pagination to load more data while scrolling page down in CodeIgniter using jQuery and Ajax. Example code to load more data without page refresh in the CodeIgniter application.","og_url":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-07-05T20:53:01+00:00","article_modified_time":"2020-02-24T16:35:38+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/07\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax","datePublished":"2018-07-05T20:53:01+00:00","dateModified":"2020-02-24T16:35:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/"},"wordCount":592,"commentCount":4,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/07\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png","keywords":["Ajax","CodeIgniter","jQuery","LoadMore","Pagination"],"articleSection":["CodeIgniter"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/","url":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/","name":"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/07\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png","datePublished":"2018-07-05T20:53:01+00:00","dateModified":"2020-02-24T16:35:38+00:00","description":"CodeIgniter load more data on scroll - Infinite scroll pagination to load more data while scrolling page down in CodeIgniter using jQuery and Ajax. Example code to load more data without page refresh in the CodeIgniter application.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/07\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/07\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png","width":1366,"height":768,"caption":"codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/codeigniter-load-more-data-on-page-scroll-jquery-ajax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Load Data on Page Scroll in CodeIgniter using jQuery and Ajax"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/07\/codeigniter-load-more-data-on-infinite-page-scroll-jquery-ajax-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-S0","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3348"}],"version-history":[{"count":6,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3348\/revisions"}],"predecessor-version":[{"id":4319,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3348\/revisions\/4319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3359"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}