无限滚动显示重复结果

时间:2019-03-29 02:56:08

标签: javascript php jquery mysql laravel

我已经通过ajax在Laravel上创建了无限滚动

我有一个名为canvas的div类,名为 .canvasContent

这是我的HTML代码:

<div class="row canvasContent"></div>

然后这是我的ajax请求,当页面第一次重新加载时,它将执行它:

var offset = 0;

  $.ajax({
          type: "POST",
          url: "/category/get_data_category",
          data: {
                  'category'  : 'entertainment',
                  'offset':0,
                  'limit':2,
                  '_token': '{{ csrf_token() }}'
                },
          success: function(data) {
            $('.canvasContent').append(data);
            offset +=2;
          }
  });

,如果用户滚动页面,将执行:

$(window).scroll(function(){
    if($(window).scrollTop() >= $('.canvasContent').height()) 
    {
      $.ajax({
              type: "POST",
              url: "/category/get_data_category",
              data: {
                      'category'  : 'entertainment',
                      'offset'    : offset,
                      'limit'     : 2,
                      '_token': '{{ csrf_token() }}'
                    },
              success: function(data) 
              {
                $('.canvasContent').append(data);
                offset +=2;
              }
      });
    }

ajax请求具有params偏移量和限制,我传递给控制器​​并在controller中绘制html,这是我的控制器代码:

        $offset             = $request->offset;
        $limit              = $request->limit;
        $data               = [];

        $category           = $request->category;
        $dataCat            = Categorymodel::get_category_by_name($category,$limit,$offset);

        $html = "";
        foreach ($dataCat as $key => $data) 
        {

            $image = GlobalController::get_single_image($data->id);
            $html =' <div class="col-md-6" id="post-id" id="'.$data->id.'">
                        <article class="entry">
                          <div class="entry__img-holder">
                            <a href="'.route('detail', $data->slug).'">
                              <div class="thumb-container thumb-75">
                                <img data-src="'.'/'.$image[0]->image.'" src="img/empty.png" class="entry__img lazyload" alt="">
                              </div>
                            </a>
                          </div>
                       /**blah blah blahh **/
                      echo $html;
          }

类别名称,偏移量和限制传递给模型上的方法,称为 get_category_by_name , 这是我的模型代码:

public static function get_category_by_name($cat_name,$limit,$offset)
    {
        $category = DB::table('article')
                    ->select("article.*","category.id as cat_id","category.name")
                    ->where("category.name",$cat_name)
                    ->where("article.status",'active')
                    ->limit($limit)
                    ->offset($offset)
                    ->join("category","article.category_id", "=", "category.id")
                    ->orderBy('article.created_at','desc')
                    ->get();

        return $category;
    }

我在那里有限制和偏移量,但是为什么结果总是这样重复? enter image description here

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

您在“ get_category_by_name”函数中做错了:

您正在获取具有偏移量和限制的记录,而没有跟踪您的最后一篇文章ID。

您必须像我在职能上所做的那样进行更改:

public static function get_category_by_name($last_article_id,$cat_name,$limit,$offset)
{
    $category = DB::table('article')
                ->select("article.*","category.id as cat_id","category.name")
                ->where("article.id",">", $last_article_id) //New Change 
                ->where("category.name",$cat_name)
                ->where("article.status",'active')
                ->limit($limit)
                ->offset($offset)
                ->join("category","article.category_id", "=", "category.id")
                ->orderBy('article.created_at','desc')
                ->get();

    return $category;
}