如何獲得無限Ajax滾動使用篩選和排序。 PHP/JQUERY

我的目標是創建一個響應式頁面，其中包含用戶可以瀏覽的div列表。我需要使用服務器端分頁使用無限滾動。我也希望能夠應用過濾器和排序列表。我花了一段時間尋找不同的解決方案，並碰到（http://isotope.metafizzy.co/），看起來完美的是我想要的，但是，它建議不要使用過濾和無限滾動的文檔。如何獲得無限Ajax滾動使用篩選和排序。 PHP/JQUERY

取而代之，我在我的項目中實現了無限ajax滾動（https://github.com/webcreate/infinite-ajax-scroll）插件，並決定不使用ajax進行歸檔和排序，以免過度複雜化（並且由於ajax/jquery知識有限）。然而，這不起作用，會發生什麼情況是頁面加載了正確的過濾器，但是當第二頁加載時，不再應用過濾器。如何通過篩選器$cat以便它滾動？

以下是我到目前爲止。

$cat = (isset($_GET['cat']) ? urldecode($_GET['cat']) : ''); 
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p']; 
$start = ($page * $pagelimit) - $pagelimit; 
$limit = $pagelimit*$page; 

//get total number of discounts for search 
$total_items = Stuff::countItems($cat); 

if($total_items > ($page * $limit)){ 
    $next = ++$page; 
} 

//get items 
$items = Stuff::getItems($cat, $sortby, $dir, $start, $limit); 

if(!$items){ 
    header('HTTP/1.0 404 Not Found'); 
    echo 'Page not found!'; 
    exit(); 
} 

?> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ias.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
      // Infinite Ajax Scroll configuration 
      jQuery.ias({ 
       container : '.wrap', // main container where data goes to append 
       item: '.item', // single items 
       pagination: '.paginate', // page navigation 
       next: '.paginate a', // next page selector 
       loader: '<img src="css/ajax-loader.gif"/>', // loading gif 
       noneleft: 'No more items', //Contains the message to be displayed when there are no more pages left to load 
       triggerPageThreshold: 5, // show "load more" if scroll more than this to stop 
       trigger: "Load more items" 
      }); 
      }); 
     </script> 
    </head> 
    <body> 
    <div class="wrap">  
     <?php 
     echo 'TOTAL: '.$total_items .'<br />'; 

     //filter through categories*/ 
     echo 'FILTER BY CATEGORY:'; 
     foreach ($categories as $category){ 
      $categoryURL = urlencode($category); 
      echo "<a href=\"index.php?cat=$categoryURL\">$category<a/> | "; 
     }  
     //loop through and display items 
     foreach ($items as $id => $item){ 

      echo "<div style=\"border:1px solid green;margin-bottom:5px;\" class=\"item\" id=\"item-$id\"> 
        ID: $id <br /> 
        $item[name]<br />                                                         
        $item[cat]<br /> 
        $item[description]<br /> 
      </div>"; 
     } 
     ?> 
    <!--paginagation--> 
    <?php if (isset($next)): ?> 
    <div class="paginate"> 
     <a href='index.php?cat=<?php echo $cat?>&p=<?php echo $next?>'>Next</a> 
    </div> 
    <?php endif?> 
    </div> 
    </body> 
</html>

來源

2013-10-21 LeeTee

你試過：

<div class="paginate"> 
    <a href='index.php?cat=<?php echo urlencode($cat); ?>&p=<?php echo $next?>'>Next</a> 
</div>

來源

2013-10-21 14:18:53 Udan

是試過了。在Firefox控制檯中，它顯示$ cat沒有被傳遞，即。 http：//dev.local/items/index.php？cat =＆p = 2 – LeeTee

對不起，它確實通過了$ cat值，但是當它通過時，這根本不會滾動。控制檯中也沒有任何事情發生。 – LeeTee

讓它工作，謝謝！ – LeeTee

如何獲得無限Ajax滾動使用篩選和排序。 PHP/JQUERY

回答

相關問題