我想将分页页面创建为无限滚动。我正在使用代码点火器。但它正在复制数据。所以请帮我编辑我的分页代码。我挣扎了好几天。如果你能帮助我，我将不胜感激。谢谢你。 当我使用下面的代码时
$(window).scrollTop() + $(window).height() == $(document).height()
它工作正常
当我尝试在滚动条到达 footer div 时加载时，它只提供重复数据。
$(window).scrollTop()+$(window).height() >= $('#footerdivid').offset().top
我的代码如下
查看
<html>
<body>
<div id="container">
<h1>Codeigniter Pagination Infinite Scroll</h1>
<div id="body">
<ol> <div id="results"></div></ol>
</div>
</div>
</body>
</html>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var total_record = 0;
var total_groups = <?php echo $total_data; ?>;
$('#results').load("<?php echo base_url() ?>content/load_more",
{'group_no':total_record}, function() {total_record++;});
$(window).scroll(function() {
if($(window).scrollTop()+$(window).height() >= $('#fooerdivid').offset().top)
{
if(total_record <= total_groups)
{
loading = true;
$('.loader_image').show();
$.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record},
function(data){
if (data != "") {
$("#results").append(data);
$('.loader_image').hide();
total_record++;
}
});
}
}
});
});
</script>
Controller
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Content extends CI_Controller {
public function __construct()
{
parent::__construct();
$this -> load->model('content_model');
}
public function index()
{
$total_data = $this->content_model->get_all_count();
$content_per_page = 5;
$this->data['total_data'] = ceil($total_data->tol_records/$content_per_page);
$this->load->view('content_page', $this->data, FALSE);
}
public function load_more()
{
$group_no = $this->input->post('group_no');
$content_per_page = 5;
$start = ceil($group_no * $content_per_page);
$all_content = $this->content_model->get_all_content($start,$content_per_page);
if(isset($all_content) && is_array($all_content) && count($all_content)) :
foreach ($all_content as $key => $content) :
echo '<li>'.$content->title.'</li>';
echo '<p>'.$content->description.'</p>';
endforeach;
endif;
}
}
模型
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Content_model extends CI_Model
{
public function get_all_count()
{
$sql = "SELECT COUNT(*) as tol_records FROM content_information";
$result = $this->db->query($sql)->row();
return $result;
}
public function get_all_content($start,$content_per_page)
{
$sql = "SELECT * FROM content_information LIMIT $start,$content_per_page";
$result = $this->db->query($sql)->result();
return $result;
}
}
最佳答案
当用户滚动时，它会多次触发 $(window).scroll 事件。这就是为什么您的脚本不止一次请求相同的数据并且您得到重复数据的原因。
有一个简单的解决方案。您可以使用 bool 数组 来标记已发出的请求。然后仅在当前请求尚未发出时才请求。
修改view文件中的脚本如下:
<html>
<body>
<div id="container">
<h1>Codeigniter Pagination Infinite Scroll</h1>
<div id="body">
<ol> <div id="results"></div></ol>
</div>
</div>
</body>
</html>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var total_record = 0;
var data_requested = []; // empty array
var total_groups = <?php echo $total_data; ?>;
data_requested[total_record] = true; // assign true just before requesting
$('#results').load(
"<?php echo base_url() ?>content/load_more",
{
'group_no':total_record
},
function() {
total_record++;
data_requested[total_record] = false; // haven't requested the next one yet
}
);
$(window).scroll(function() {
// make sure #footerdivid is the correct id
if($(window).scrollTop() + $(window).height() >= $('#footerdivid').offset().top)
{
if(total_record <= total_groups && data_requested[total_record] !== true)
{
data_requested[total_record] = true; // assign true just before requesting
loading = true;
$('.loader_image').show();
$.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record},
function(data){
if (data != "") {
$("#results").append(data);
$('.loader_image').hide();
total_record++;
data_requested[total_record] = false; // haven't requested the next one yet
}
})
.fail(function() {
data_requested[total_record] = false; // current request failed
});
}
}
});
});
</script>
关于javascript - 使用 Ajax 和 Jquery 的 Codeigniter 分页无限滚动仅提供重复数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49029986/