1

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

相反，我在我的项目中实现了infinite-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>
4

1 回答 1

0

你有没有尝试过：

<div class="paginate">
  <a href='index.php?cat=<?php echo urlencode($cat); ?>&p=<?php echo $next?>'>Next</a>
</div>
于 2013-10-21T14:18:53.483 回答