Codeigniter Pagination Infinite Scroll 使用 Ajax 和 Jquery 只给出重复数据答案

【问题标题】：Codeigniter Pagination Infinite Scroll Using Ajax And Jquery giving only Duplicate dataCodeigniter Pagination Infinite Scroll 使用 Ajax 和 Jquery 只给出重复数据
【发布时间】：2018-02-28 12:48:44
【问题描述】：

我想将分页页面创建为无限滚动。我正在使用代码点火器。但它正在复制数据。所以请帮我编辑我的分页代码。我挣扎了好几天。如果您能帮助我，我将不胜感激。谢谢你。当我使用下面的代码时

$(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>

控制器

<?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;
    }

}

【问题讨论】：

标签： javascript jquery ajax codeigniter-3

【解决方案1】：

当用户滚动时，它会多次触发$(window).scroll 事件。这就是为什么您的脚本多次请求相同的数据而您得到重复数据的原因。

有一个简单的解决方案。您可以使用Boolean array 来标记已发出的请求。然后仅在当前请求尚未发出时才请求。

修改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>

【讨论】：