Question

我想使用带过滤器的无限滚动来创建分页页面。我正在使用codeigniter。分页工作正常。单击ckeck框时它正在工作但滚动时它会复制数据。我好几天都在挣扎。如果你能帮助我，我将非常感激。谢谢。

这是我的观看代码

app.yaml

Answer 1

当我试图达到同样的目的时，我遇到了同样的问题。问题是window.scroll使用相同的Params多次触发AJAX请求，导致数据重复。要解决此问题，您可以使用标志来检查请求是否正在运行。试试这个剧本。

$(document).ready(function(){
   var flag = true; //set initial value true for first request
    $(window).scroll(function() {       
                    if($(window).scrollTop()+$(window).height() >= $('#fooerdivid').offset().top)  
                    {          
                       if(flag) //run script if flag is true
                       {
                       flag = false; //script is running
                       var total_record = 0;
                var total_groups = <?php echo $total_data; ?>;  
            //brand is the checkbox value
                var brand=check_box_values('brand');

                        if(total_record <= total_groups)
                        {
                          loading = true; 
                          $('.loader_image').show(); 
                          $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record,'brand':brand},
                            function(data){ 
                                if (data != "") {                               
                                    $("#results").append(data);                 
                                    $('.loader_image').hide();                  
                                    total_record++;
                                    flag = true; //Script execution completed and next request can be execute
                                }
                            });     
                        }
                      }
                    }
                });
        });
        });

希望这能解决您的问题。

更新

$(document).ready(function(){
   var flag = true; //set initial value true for first request
   var is_pending = false; //no request is pending

   load_content();
    function load_content(){
           if(flag) //run script if flag is true
                       {
             flag = false; //script is running
            var total_record = 0;
            var total_groups = <?php echo $total_data; ?>;  
        //brand is the checkbox value
            var brand=check_box_values('brand');
            $('#results').load("<?php echo base_url() ?>content/load_more",
             {'group_no':total_record,'brand':brand}, function() {
                  total_record++; 
                  flag = true; 
                  if(is_pending)
                  {  is_pending = false;load_content(); } 
                  });   
           }     
     }
        //For passing checkbox values
             function check_box_values(check_box_class){
                        var values = new Array();
                            $("."+check_box_class).each(function() {
                              if($(this).is(':checked')){
                               values.push($(this).val());
                                }
                            });
                        return values;
                    }
        $(".brand").click(function(){
         if(flag){
          load_content();
         }else{
          is_pending = true;//request is pending
          }
       });

    $(window).scroll(function() {       
                    if($(window).scrollTop()+$(window).height() >= $('#fooerdivid').offset().top)  
                    {          
                       if(flag) //run script if flag is true
                       {
                       flag = false; //script is running
                       var total_record = 0;
                var total_groups = <?php echo $total_data; ?>;  
            //brand is the checkbox value
                var brand=check_box_values('brand');

                        if(total_record <= total_groups)
                        {
                          loading = true; 
                          $('.loader_image').show(); 
                          $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record,'brand':brand},
                            function(data){ 
                                if (data != "") {                               
                                    $("#results").append(data);                 
                                    $('.loader_image').hide();                  
                                    total_record++;
                                    flag = true; //Script execution completed and next request can be execute
                                }
                            });     
                        }
                      }
                    }
                });
        });
        });

Answer 2

假设您将请求发送到服务器。干草服务器为我提供1到100之间的行，然后你＆＃34;追加＆＃34;结果成了一个div。接下来你说：干草服务器向我发送1到150之间的行并执行＆＃34;追加＆＃34;再次相同的div。然后你有双重结果

你想要做的是在下一次推送之前清空$('#results').empty() div并推送全部150 或者＆＃34;追加＆＃34;在1到100行之间，下次你＆＃34;追加＆＃34; 100到150之间的行

Answer 3

您只需要在显示数据时添加最后一个ID。这是一个例子

// Here sample data
<div class="timeline-item" id="<?= $row->id; ?>">
  <p>Content Data</p>
</div>

// Here sample jquery
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
        var last_id = $(".timeline-item:last").attr("id");
        var last_date = $(".timeline-item:last").attr("data-date");
        var base_url = $(".row").attr("data-base-url");
        loadMoreData(last_id, last_date, base_url);
    }
});


function loadMoreData(last_id, last_date, base_url){
  $.ajax({
      url: base_url + 'Kpi/timelineData?last_id=' + last_id + '&last_date='+ last_date,
      type: "get",
      beforeSend: function()
      {
          $('.ajax-load').show();
      }
  })
  .done(function(data)
  {
      $('.ajax-load').hide();
      $("#timeline-data").append(data);
  })
  .fail(function(jqXHR, ajaxOptions, thrownError)
  {
      console.log('server not responding...');
  });
}

}

希望可以解决您的问题。

Codeigniter Ajax Infinite滚动，带有过滤器复制数据

3 个答案:

更新