Click load more button show more result automatically without page refresh in PHP Codeigniter web application.
You can display more result that’s like more image or more post display in your view page single click on a load more button. In your view page, where you fetch result from MySQL table or database and display records setting LIMI and when click more button then it show next records without page reload.
In this tutorial I will give you source code in the example, you can use this code and try it in your web application. Follow the example:
View Page:
<div class="row" id="append_div"> <?php $first_id=0; $last_id=0; if(sizeof($val)!=0){ $first_id = $val[0]['id']; foreach($val as $list_id){ } $last_id = $list_id['id']; } foreach($val as $video){ ?> <div class="col-xs-12"> <img src="<?php echo base_url(); ?>asset/images/<?php echo $val->picture; ?>" class="img-circle" alt=""> </div> <?php } ?> </div> <button type="button" onclick="load_more_pic()" class="">Load More <i class="fa fa-angle-double-down"></i></button>
Script:
<script type="text/javascript"> function load_more_video(){ var pid = $('#last_id').val(); $.ajax({ url : "<?php echo base_url('Controller/fetch_next_pic')?>", type : "post", data : {'pid' : pid}, success : function(pic){ for(var i=0;i<res.length;i++){ var base_url = "<?php echo base_url('asset/images/')?>"; $('#append_div').append('<div class="col-xs-12"><img src="'+base_url+res[i].picture+'" class="img-circle" alt=""></div>'); } $('#last_id').val(l_id); //console.log(pic); } }); } </script>
Controller:
<?php public function fetch_next_pic(){ $nid=$this->input->post('pid'); $fetch_next_list= $this->Model->getNextPic($nid); header('Content-Type:application/json'); echo json_encode($fetch_next_list); } ?>
Model:
<?php public function getNextPic($nid){ $result = $this->db->select('*')->from('Table Name')->where('id <',$nid)->order_by('id','desc')->limit('10')->get()->result_array(); if(!empty($result)){ return $result; } else{ return 0; } } ?>
Follow the code properly and use the code in your web browser and watch the result.
Related posts
pls any download option available this code…?