Virajsinh

Codeigniter Load More Data

Jan 10th, 2020
83
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. Reference Link : https://webrocom.net/codeigniter-load-more-record-on-button-click/
  2.  
  3. //Controller
  4. //-----------------------------
  5.  
  6. class Welcome extends CI_Controller {
  7.     public function index()
  8.     {
  9.         $this->load->view('welcome_message');
  10.     }
  11.  
  12.     public function getCountry(){
  13.         $page =  $_GET['page'];
  14.         $this->load->model('welcome_model');
  15.         $countries = $this->welcome_model->getCountry($page);
  16.         foreach($countries as $country){
  17.             echo "<tr><td>".$country->id."</td><td>".$country->country_name."</td><td>".$country->country_code."</td></tr>";
  18.         }
  19.         exit;
  20.     }
  21. }
  22. //Model
  23. //-----------------------------
  24. class Welcome_model extends CI_Model{
  25.  
  26.     public function getCountry($page){
  27.         $offset = 10*$page;
  28.         $limit = 10;
  29.         $sql = "select * from countries limit $offset ,$limit";
  30.         $result = $this->db->query($sql)->result();
  31.         return $result;
  32.     }
  33. }
  34.  
  35. <div class="container" style="margin-top: 120px;">
  36.     <h3>Ajax country list</h3>
  37.     <table class="table">
  38.         <thead>
  39.         <tr><th>SN</th><th>Country name</th><th>Country code</th></tr>
  40.         </thead>
  41.  
  42.         <tbody id="ajax_table">
  43.         </tbody>
  44.     </table>
  45.     <div class="container" style="text-align: center"><button class="btn" id="load_more" data-val = "0">Load more..<img style="display: none" id="loader" src="<?php echo str_replace('index.php','',base_url()) ?>asset/loader.GIF"> </button></div>
  46. </div>
  47.  
  48. ViewPage.html
  49. <script>
  50.     $(document).ready(function(){
  51.         getcountry(0);
  52.  
  53.         $("#load_more").click(function(e){
  54.             e.preventDefault();
  55.             var page = $(this).data('val');
  56.             getcountry(page);
  57.  
  58.         });
  59.  
  60.     });
  61.  
  62.     var getcountry = function(page){
  63.         $("#loader").show();
  64.         $.ajax({
  65.             url:"<?php echo base_url() ?>welcome/getCountry",
  66.             type:'GET',
  67.             data: {page:page}
  68.         }).done(function(response){
  69.             $("#ajax_table").append(response);
  70.             $("#loader").hide();
  71.             $('#load_more').data('val', ($('#load_more').data('val')+1));
  72.             scroll();
  73.         });
  74.     };
  75.  
  76.     var scroll  = function(){
  77.         $('html, body').animate({
  78.             scrollTop: $('#load_more').offset().top
  79.         }, 1000);
  80.     };
  81.  
  82.  
  83. </script>
RAW Paste Data