流沙如何通過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
}