流沙如何通过ajax使其动态加载更多项目然后进行过滤？

Question

我已经从以下链接获取了脚本： http : //mode87.com/untame/demo/filteredgallery/

现在我想要的是使其动态化。 在我的网站中，页面加载时会显示一些项目，并且下面有一个按钮可通过ajax加载更多项目，当加载更多项目时，过滤无法正常进行。

例如，页面加载了4个项目，现在我单击“加载更多”，当我再次单击“全部”时，它只显示4个项目，但我希望显示所有已通过ajax加载的项目。

等待你的答案

我的代码在这里

index.php

<ul class="filter nav nav-pills">
    <li data-value="all">All</li>
    <li data-value="1">OPENING CEREMONIES</li>
    <li data-value="2">PRODUCT LAUNCHES</li>
    <li data-value="3"> MALL SHOWS </li>


    <li data-value="4">FAMILY FESTIVALS</li>
    <li data-value="5">CULTURAL FESTIVALS</li>
    <li data-value="6">WORLD CLASS SHOWS</li>
    <li data-value="7">SPORTS EVENTS</li>
    <li data-value="8">GALA DINNERS</li>


  </ul>


  <ul class="thumbnails" id="loading_more">
   <?php
   $_SESSION["page_load"]   =   1;
   portfolioItems($_SESSION["page_load"]);
   ?>
  </ul>



    <div class="row-fluid">
        <div class="span12 portfolio-load-more-wrapper">
            <h1><span class="caption_heading">WANT TO</span> SEE MORE?</h1>
            <h2><span class="icon-down-open-2 gray" onClick="javascript:showMore();"></span></h2>
        </div>
  </div>

单击时，showMore（）函数：

function showMore()
    {

        var data    =       'load_more='+'load_more';
        $.ajax({

                url:'process.php',
                type:'post',
                data:data,
                success:function(html)
                {
                    $('.thumbnails').html(html);
                }
            });
    }

process.php

function portfolioItems($page_load)
    {
        if( $page_load      ==          1 )
        {
            global $con;
            $item_list          =           "";

            //Query to get the items
            $sql_item_details   =           mysqli_query($con , "SELECT * FROM portfolio_items LIMIT 4");
            $count              =           mysqli_num_rows($sql_item_details);

            //If records found
            if( $count          >           0 )
            {
                    while($row      =           mysqli_fetch_array($sql_item_details))
                    {

                        $id             =           $row["id"];
                        $title          =           $row["title"];
                        $category       =           $row["category_id"];
                        $date           =           $row["date"];
                        $detail         =           $row["detail"];
                        $thumbnail      =           $row["thumbnail"];

                        $item_list  .=          '<li data-type="'.$category.'" data-id="id-1" class="span3 fancybox fancybox.iframe portfolio-iframe" 
                                                onClick="javascript:showPortfolioDetail('.$id.');">
                                                    <img src="images/portfolios/portfolio_thumbs/'.$thumbnail.'"  width="295" height="295" border="0">

                                                    <div class="img_hover_box">
                                                        <div class="portfolio_title">
                                                            <div class="portfolio-cpation">
                                                                <h2>
                                                                    <div class="arrow_icon">
                                                                        <i class="icon-right-circled-1"></i>
                                                                    </div> 
                                                                    <span>'.$title.'</span>
                                                                </h2>
                                                            </div>
                                                        </div>
                                                    </div>

                                                   <div class="clock_year">
                                                    <span class="icon-clock-alt"></span><span class="year">'.$date.'</span>
                                                   </div>
                                                </li>';



                    }
                    echo                    $item_list;
            }
        }
        else
        {

            //Get the pagination value.
            $page_no            =           $page_load;
            $one_page           =           $page_no * 4;
            $start_from         =           $one_page - 4;
            $limit              =           4;


            global $con;
            $item_list          =           "";

            //Query to get the items
            $sql_item_details   =           mysqli_query($con , "SELECT * FROM portfolio_items LIMIT 0,".$one_page);
            $count              =           mysqli_num_rows($sql_item_details);

            //If records found
            if( $count          >           0 )
            {
                    while($row      =           mysqli_fetch_array($sql_item_details))
                    {

                        $id             =           $row["id"];
                        $title          =           $row["title"];
                        $category       =           $row["category_id"];
                        $date           =           $row["date"];
                        $detail         =           $row["detail"];
                        $thumbnail      =           $row["thumbnail"];

                        $item_list  .=          '<li data-type="'.$category.'" data-id="id-1" class="span3 fancybox fancybox.iframe portfolio-iframe" 
                                                onClick="javascript:showPortfolioDetail('.$id.');">
                                                    <img src="images/portfolios/portfolio_thumbs/'.$thumbnail.'"  width="295" height="295" border="0">

                                                    <div class="img_hover_box">
                                                        <div class="portfolio_title">
                                                            <div class="portfolio-cpation">
                                                                <h2>
                                                                    <div class="arrow_icon">
                                                                        <i class="icon-right-circled-1"></i>
                                                                    </div> 
                                                                    <span>'.$title.'</span>
                                                                </h2>
                                                            </div>
                                                        </div>
                                                    </div>

                                                   <div class="clock_year">
                                                    <span class="icon-clock-alt"></span><span class="year">'.$date.'</span>
                                                   </div>
                                                </li>';



                    }
                    echo                    $item_list;
            }

        }


    }

Answer 1

好吧，我想我明白了。 如果您查看js代码，则在function gallery(){}您将看到用于过滤操作的代码，如下所示：

var $itemsHolder = $('ul.thumbnails');
var $itemsClone = $itemsHolder.clone(); 
var $filterClass = "";
$('ul.filter li').click(function(e) {
e.preventDefault();
$filterClass = $(this).attr('data-value');
    if($filterClass == 'all'){ var $filters = $itemsClone.find('li'); }
    else { var $filters = $itemsClone.find('li[data-type='+ $filterClass +']'); }
    $itemsHolder.quicksand(
      $filters,
      { duration: 1000 },
      gallery
      );
});

现在，这是在首次加载页面时设置过滤器，因此由于新添加的项目将$itemsHolder列表中，因此进一步的过滤将不再涉及新添加的项目。 您需要做的是将此代码包装在一个类似以下的函数中：

function gallery_filter() {
  var $itemsHolder = $('ul.thumbnails');
  .....
}

然后在ajax成功之后调用此函数：

success:function(html)
{
  $('.thumbnails').html(html);
  gallery_filter(); // here
}