问题
I want to change this pagination page into infinite scroll. I'm using codeigniter. I had already search about jquery and ajax but i don't really understand how to implement it in my code. So please help me to edit my pagination code into infinite scroll. . . I had struggle for days. I will be so grateful if u can hep me. Thank you :)
HomeController.php
public function list_voucher($page=NULL, $orderBy=NULL)
{
if($this->session->userdata('logged_in'))
{
$session_data = $this->session->userdata('logged_in');
$data['nama'] = $session_data['nama'];
$data['id'] = $session_data['id_user'];
$data['tipeUser'] = $session_data['tipe_user'];
}
else{
$data['nama'] = "";
$data['id'] = "0";
$data['tipeUser']="";
}
$data['url_image'] = $this->imageUrl;
$data['notif'] = '';
$config['base_url'] = base_url().'/home_controller/list_voucher/';
$data['jmlh_rows'] = $this->voucher->getAllDeals();
$total_row = $data['jmlh_rows']->num_rows();
$config["total_rows"] = $total_row;
$config["per_page"] = 8;
$config['cur_tag_open'] = ' <a class="current">';
$config['cur_tag_close'] = '</a>';
$config['next_link'] = 'Next';
$config['prev_link'] = 'Previous';
$this->pagination->initialize($config);
$str_links = $this->pagination->create_links();
$data["links"] = explode(' ',$str_links );
$data['dataAllDeals'] = $this->voucher->getAllDealsPerPage($config["per_page"], $page, $orderBy);
$data['no']=$this->uri->segment(3);
$data['data_kategori'] = $this->jenismakanan->Getjenismakanan();
$this->load->view('listalldeals', $data);
}
View
<!DOCTYPE html>
<html>
<head>
<title>deals</title>
<link href="<?php echo base_url();?>css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo base_url();?>js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Food shop Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="<?php echo base_url();?>js/move-top.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<link href="<?php echo base_url();?>css/index.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="<?php echo base_url();?>css/imgslider.css" type="text/css" media="screen" />
<script src="<?php echo base_url();?>js/slideout.min.js"></script>
<script src="<?php echo base_url();?>js/jquery.wmuSlider.js"></script>
<script src="<?php echo base_url();?>js/jquery.wmuGallery.js"></script>
</head>
<body>
<nav id="menu">
<h1 style="color:white">Menu</h1>
<hr style="color:white;">
<ul>
<?php if($tipeUser=="user"){?>
<li><h4><a href="<?php echo base_url();?>home_controller/" style="color:white">Home</a></h4></li>
<li><h4 style="color:white">Welcome <?php echo $nama;?></h4></li>
<li><h4><a href="<?php echo base_url();?>home_controller/my_voucher/0" style="color:white">My Voucher</a></h4></li>
<li><h4><a href="<?php echo base_url();?>home_controller/my_profile" style="color:white">Profile</a></h4></li>
<li><h4><a href="<?php echo base_url();?>home_controller/logout" style="color:white">Logout</a></h4></li>
<?php } else if($tipeUser=="restoran"){ ?>
<li><h4><a href="<?php echo base_url();?>home_controller/" style="color:white">Home</a></h4></li>
<li><h4 style="color:white">Welcome <?php echo $nama;?></h4></li>
<li><h4><a href="<?php echo base_url();?>home_controller/dashboard" style="color:white">Dashboard</a></h4></li>
<li><h4><a href="<?php echo base_url();?>home_controller/voucher_management" style="color:white">Voucher Management</a></h4></li>
<!-- <li><h4><a href="<?php echo base_url();?>home_controller/redeem_voucher" style="color:white">Reedem Voucher</a></h4></li> -->
<li><h4><a href="<?php echo base_url();?>home_controller/logout" style="color:white">Logout</a></h4></li>
<?php } else if($tipeUser==""){ ?>
<li><h4><a href="<?php echo base_url();?>home_controller/" style="color:white">Home</a></h4></li>
<li><h4><a href="<?php echo base_url();?>home_controller/login" style="color:white">Login / Register</a></h4></li>
<li><h4><a href="<?php echo base_url();?>home_controller/list_voucher" style="color:white">Voucher</a></h4></li>
<li><h4><a href="<?php echo base_url();?>home_controller/list_restoran" style="color:white">Restaurants</a></h4></li>
<?php
if($data_kategori->num_rows()>0)
{
foreach ($data_kategori->result() as $rows)
{ ?>
<li><h4><a href="<?php echo base_url();?>home_controller/Type/<?php echo $rows->id_jenis_makanan; ?>" style="color:white"><?php echo $rows->nama_jenis_makanan;?>
</a></h4></li>
<?php } } ?>
<?php } ?>
</ul>
</nav>
<main id="panel">
<header>
<!--header-->
<div class="header-in">
<div class="container">
<!---->
<div class="header-bottom">
<div class="col-xs-1">
<button class="toggle-button"></button>
</div>
<div class="col-xs-11">
<?php echo form_open('home_controller/search_bar');?>
<div class="search">
<form>
<input type="text" id= "input-keyword" name="input-keyword" placeholder="Search ..." value="<?php echo set_value('input-keyword')?>" >
<input type="submit" value="">
</form><?php echo form_close(); ?>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!---->
</div>
</div>
<!---->
<div class="container">
<div class="specials">
<h2>List All Vouchers</h2>
<hr></hr>
<?php
if($dataAllDeals->num_rows()>0)
{ $j=0;
$f=$no;
foreach ($dataAllDeals->result() as $rowAllDeals){ $j++;
if($j%5==0 || $j==1){
?>
<?php } ?>
<div class="col-xs-6">
<a href="<?php echo base_url();?>home_controller/Details/<?php echo $rowAllDeals->id_restoran;?>" ><img src="<?php echo $url_image;?>restaurant/<?php echo $rowAllDeals->id_restoran;?>/deals/<?php echo $rowAllDeals->gambar_voucher;?>" class="img-responsive-search" alt="">
</a>
<center>
<h3 style="font-size: 4vw;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"><b><?php echo $f+1;?>. <?php echo $rowAllDeals->nama_restoran?></b></h3>
<h3 style="font-size: 3vw;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">Valid until : <?php $date=date_create($rowAllDeals->masa_berlaku); echo date_format($date, "d-M-Y"); ?></h3>
</center>
<?php
if($rowAllDeals->sisa_voucher > 0) {
?>
<h4 style="font-size: 2vw;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;" align="center">AVAILABLE (<?php echo $rowAllDeals->sisa_voucher. ' Voucher'?> from <?php echo $rowAllDeals->jumlah_voucher. ' Voucher'?>)</h4>
<?php }
else{ ?>
<h4 align="center" style="color:red; font-size: 3vw;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">NOT AVAILABLE <br></h4>
<?php }
?>
<?php if($tipeUser=="user" || $tipeUser==""){ ?>
<div class="actions">
<?php
if($rowAllDeals->sisa_voucher > 0) {
?>
<center><a href="<?php echo base_url();?>home_controller/GetVoucher/<?php echo $rowAllDeals->id_voucher;?>" class="btn btn-success"><i class="icon-shopping-cart icon-white"></i>Get Voucher</a></center><br>
<?php
}
else{ ?>
<center><a href="<?php echo base_url();?>home_controller/GetVoucher/<?php echo $rowAllDeals->id_voucher;?>" disabled class="btn btn-success"><i class="icon-shopping-cart icon-white"></i>Get Voucher</a></center><br>
<?php }
?>
</div> <?php } ?>
</div>
<?php if($j%4==0){?><?php } ?>
<?php $f++; }
} ?>
</div>
</div></div>
<div class="container">
<div class="col-md-12">
<p style="height:10px"></p>
<div id="pagination" align="center" class="pagination-wrapper">
<ul class="tsc_pagination pagination" align="center">
<!-- Show pagination links -->
<?php foreach ($links as $link) {
echo "<li>". $link."</li>";
} ?></ul>
</div>
</div></div>
<!---->
</header>
</main>
<?php if($this->session->flashdata('message')) :
echo "<script>alert('". $this->session->flashdata('message')."')</script>";
endif; ?>
</body>
<script>
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 190,
'tolerance': 70
});
// Toggle button
document.querySelector('.toggle-button').addEventListener('click', function() {
slideout.toggle();
});
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
{
slideout.disableTouch();
}
slideout.disableTouch();
// auto close
slideout.on('open', function() {
$( "#panel" ).click(function() {
return false;
});
$( "#panel" ).click(function() {
slideout.close();
});
});
slideout.on('close', function() {
$( "#panel" ).unbind('click');
});
</script>
<script>
$('.gallery').wmuSlider();
</script>
</html>
Model
public function getAllDeals(){
$this->db->select();
$this->db->from('voucher v');
$this->db->join('restoran r', 'r.id_restoran = v.id_restoran');
//$this->db->where('r.fitur_premium', 'y');
$this ->db -> where('v.masa_berlaku >', date('Y-m-d'));
$this ->db -> where('v.is_aktif', '1');
//$this->db->limit(8,0);
$query = $this->db->get();
return $query;
}
public function getAllDealsPerPage($num,$page, $orderBy){
$this->db->select();
$this->db->from('voucher v');
$this->db->join('restoran r', 'r.id_restoran = v.id_restoran');
//$this->db->where('r.fitur_premium', 'y');
$this ->db -> where('v.masa_berlaku >', date('Y-m-d'));
$this ->db -> where('v.is_aktif', '1');
if($orderBy == NULL){
$this->db->order_by('id_voucher', 'asc');
}
else{
if($orderBy == "scName"){
$orderBy = 'nama_voucher';
$order ='asc';
}
else if($orderBy == "scNew"){
$orderBy = 'id_voucher';
$order ='desc';
}
$this->db->order_by($orderBy, $order);
}
//$this->db->limit(8,0);
$query = $this->db->get('', $num, $page);
return $query;
}
来源：https://stackoverflow.com/questions/40700258/how-to-change-pagination-into-infinite-scroll-in-codeigniter