如何让 Infinite Ajax Scroll 使用过滤和排序.PHP / JQUERY - How to get Infinite Ajax Scroll working with filtering and ordering. PHP / JQUERY

How to get Infinite Ajax Scroll working with filtering and ordering. PHP / JQUERY

我的目标是拥有一个响应式页面，其中包含用户可以浏览的div列表。我需要使用无限滚动的服务器端分页。我还希望能够对列表应用过滤器和排序。我在寻找不同的解决方案时遇到了（http://isotope.metafizzy.co/），它看起来非常适合我想要的，但是，在文档中，它建议不要同时使用过滤和无限滚动。

相反，我已经在我的项目中实现了无限 ajax-scroll （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>

你试过吗：

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