Question

我已将无限ajax-scroll插件实现到我的项目（https://github.com/webcreate/infinite-ajax-scroll）中。它是一个显示一长串div的PHP项目。无限滚动使用服务器端分页。我也有服务器端过滤和排序，理想情况下，这将使用Ajax，以便它与我的无限滚动很好地工作。如何使用Ajax传递过滤器？我找到了有关如何使用JQuery进行过滤的教程，但没有使用PHP进行过滤。

我确实发现http://isotope.metafizzy.co/具有过滤功能和无限滚动功能，但在文档中建议不要同时使用这两种功能，这对我来说是一个巨大的耻辱，因为它看起来像一个很棒的插件。

有人可以就我最好的方法提出建议吗？如果我需要在选择新过滤器时重置无限滚动，那就没问题了。但是我该如何做到这一点以及如何将选定的过滤器传递给无限滚动？

以下是我到目前为止的情况。

    $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>

Answer 1

只有在客户端（对于已加载的数据）和服务器（对于将来要加载的页面）上应用过滤器时，无限滚动和过滤才有意义。

但是在应用了一些完全不同的过滤器或排序后，我会认为用户希望被带回第一页（或滚动回顶部以进行无限滚动）。失去一些已经加载的结果是唯一的方法。您可以cache这些结果可以提高速度。

为了简化这一点，我建议您开始使用KnockoutJS或类似的客户端MVC库。 jQuery很适合这么复杂。在某些时候，你发现你需要更好的东西。

我之前工作的应用程序的Here's a cleaned up extract需要类似的东西。（edit link）

根本不需要“page”参数。我使用它，以便我的“假”提供者可以返回顺序，可读的名称。

服务器端你需要知道当前查询的任何时刻（也许$_SESSION）你已经发送给客户端的结果数量。

这样的事情：

function getResults($query) {
    if($_SESSION['query']['category'] !== $query['category']) {
        if(!array_key_exists($query['category'], $_SESSION['resultsSent'])) {
            $_SESSION['resultsSent'][$query['category']] = 0;
        }
        $_SESSION['query'] = $query; 
    }

    $sql = 'SELECT * FROM foo WHERE category = ? LIMIT ?, ?';
    $data = $db->select($sql, array($_SESSION['query']['category'],  $_SESSION['resultsSent'][$query['category']], 10);

     $_SESSION['resultsSent'][$query['category']] += count($data);

    return json_encode($data);
}

if(!array_key_exists('query', $_SESSION)) {
    $_SESSION['resultsSent'] = array();
    $_SESSION['query'] = array(); // maybe some defaults here?
}

if(array_key_exists('query', $_POST)) {
    echo getResults($_POST['query']);
}

你必须编写一个执行AJAX调用的resultsService。可能是这样的：

function resultsService() {
    this.query = function(query, success) {
        jQuery.post({
            url: 'index.php', 
            data: query,
            success: success
        });
    }
}

在此之后，您所要做的就是将无限滚动库放在顶部。

这取决于以下事实：（1）在客户端上你永远不会删除已经加载的数据，如果它不适合当前的过滤器，你只需隐藏它;（2）对于每个可能的过滤器组合，你的服务器知道它有多少数据发送，以便它不会再发送回来。

如果你有更复杂的过滤器，其结果不是独占的（多个过滤器组合可能会返回一个结果 - 请考虑价格，评级和的数量房间，而不是类别）然后你最终会发送重复项给客户端。除了重置整个列表之外，没有真正的解决方案。您可以尝试跟踪您发送给客户端的所有单个结果，而不仅仅是计数，并在查询时过滤掉它们（WHERE id NOT IN (1, 2, 17, 20, ...)），但这绝对不适用于大量数据。 / p>

对于排序，除了确切地知道你发送给客户的内容，或者显然重置列表之外，绝对没有解决方案。

我是POST一个JS对象作为JSON编码的字符串（ko.toJS（this.query））然后json_decode在PHP中。无论您如何构建该JS对象，将其作为JSON发送比将其自身手动序列化为GET参数要好。

最好是对所有过滤器类型使用通用格式，并通过设置模式服务器端处理它们。

对于['category': 1, 'subcategory':2, 'user': 1234]，我定义categoryFilter，subcategoryFilter和userFilter，使用call_user_func调用它们，并将过滤后的值作为查询中的参数传递，为每一个添加位。

$query = DB::table('stuff');

$filters = json_decode($_POST['query']);
foreach($filters as $filterName => $value) {
    $query = call_user_func_array($filterName . 'Filter', array($query, $value));
}

$results = $query->get();

function categoryFilter($query, $value) {
    $query->where('category_id', '=', $value);

    return $query;
}

您的实际代码的外观以及构建SQL查询的容易程度取决于您使用的内容。我上面使用的数据库类是与Laravel捆绑在一起的数据库。

在客户端构建中，即使使用基本的jQuery，查询对象也不应该那么难。

Answer 2

请考虑这种方式：当您进行过滤时，您会更改整个结果，因此您需要重新加载数据并重置滚动。这就是为什么你不应该同时使用过滤和无限滚动。

我在之前的项目中做了同样的事情。希望它适合你。

服务器端（PHP）使用Ajax和无限滚动进行过滤和排序

2 个答案: