Ajaxを使ったSymfonyの無限スクロール

Question

無限スクロールを使ってdbから製品を見せたいと思っていました。

$start=0; 
    $limit= 6; 

    $query = $repository->createQueryBuilder('classified') 
     ->join('classified.statusId','status') 
     ->andWhere('status.name=:status') 
     ->setParameter('status','active') 
     ->setFirstResult($start) 
     ->setMaxResults($limit) 
     ->getQuery(); 

     $results = $query->getResult(); 

    if ($request->isXmlHttpRequest()){ 

     $list = $this->renderView('search-result.html.twig', [ 
      'results' => $results 
     ]); 


    $response = new JsonResponse(); 
    $response->setData(array('classifiedList' => $list)); 
    return $response; 
} 

アヤックス：

は、ここに私のコントローラである

$(window).scroll(function() { 
      if($(window).scrollTop() + $(window).height()>= $(document).height()){ 
       getmoredata(); 
      } 

     }) 

     function getmoredata() { 
      $.ajax({ 
       type: "GET", 
       url: "{{ path('classified_list', {'type' : 'all'}) }}", 
       dataType: "json", 
       cache: false, 
       success: function (response) { 
         $('.card-deck').append(response.classifiedList); 
         $('#spinner').hide(); 
         console.log(response); 

       }, 
       error: function (response) { 
        console.log(response); 
       } 
      }); 
     } 

だから今スクロールがトリガーされたときに最初の6件の結果が繰り返し表示されている何が起こっているのか。私はこれが正しくないことを知っており、これが適切に動作するとは思わない。しかし、私が知らないことは、次のステップとなることです。 私はページギターなどを追加する必要がありますか？

ありがとうございます、ありがとうございます！

Answer 1

あなたのajaxが要求しているかどうかを追跡する必要があるため、ウィンドウがスクロール制限に達すると何度もリクエストを行いません。また、オフセットを追跡し、読み込むデータがさらにあるかどうかを確認する必要があります。

// Get offset from request query 
$start= $request->query->get('offset'); 
$limit= 6; 

$query = $repository->createQueryBuilder('classified') 
    ->join('classified.statusId','status') 
    ->andWhere('status.name=:status') 
    ->setParameter('status','active') 
    ->setFirstResult($start) 
    ->setMaxResults($limit) 
    ->getQuery(); 

    $results = $query->getResult(); 

if ($request->isXmlHttpRequest()){ 

    $list = $this->renderView('search-result.html.twig', [ 
     'results' => $results 
    ]); 


$response = new JsonResponse(); 
// And add offset and hasMoreData fields in response 
$response->setData(array(
    'classifiedList' => $list, 
    'offset' => $start += 1 
    'hasMoreData' => count($list) < ($limit * &start) 
) 
); 
return $response;