我正在使用同位素插件(
http://isotope.metafizzy.co/)和无限ajax滚动插件(
https://github.com/webcreate/infinite-ajax-scroll).无限卷轴与同位素过滤效果很好,但是,我想在应用过滤器时将更多项目加载到容器中,以便始终显示50个项目.
我有下面的代码,但我坚持用ajax加载新项目.
因此,每次选择过滤器时,我都会计算当前显示的项目数量.然后我需要一种方法来使用ajax获取更多项目并调用相同的页面(index.PHP).我想我需要做一些类似于无限ajax滚动插件的东西,以获得下一页的结果.我对JQuery没有经验,所以我很难弄清楚他们的代码究竟在做什么,以及如何为我的过滤实现类似的东西.
我尝试过使用$.get但是这会在容器中加载整个index.PHP页面而不是仅仅获取结果.
如果有任何帮助,我将不胜感激.
<?PHP require_once('config/config.PHP'); $cat = (isset($_GET['cat']) ? urldecode($_GET['cat']) : ''); $type = (isset($_GET['type']) ? urldecode($_GET['type']) : ''); //get filter lists $categories = StoreDiscounts::getCategories(); $types = StoreDiscounts::getDiscountTypes(); //get total number of discounts for search $total_items = StoreDiscounts::countitems($cat,$type); //pagination - infinate scrolling $pagelimit = 50; //items per page $page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p']; $start = ($page * $pagelimit) - $pagelimit; $limit = $pagelimit * $page; if ($total_discounts > ($page * $limit)) { $next = ++$page; } //get items $items = StoreDiscounts::getitems($cat,$type,$start,$limit); ?> <!DOCTYPE html> <!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> <head> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="public/css/normalize.css"> <!--[if (gt IE 8) | (IEMobile)]><!--> <link rel="stylesheet" href="public/css/style.css"> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" href="public/css/ie.css"> <![endif]--> <script type="text/javascript" src="public/js/modernizr.js"></script> <title>E-Store Offers.</title> </head> <body> <!--#outer-wrap--> <div id="outer-wrap"> <!--#inner-wrap--> <div id="inner-wrap"> <!--#header--> <header id="top" role="banner"> <div class="block"> <a class="nav-btn" id="nav-open-btn" href="#nav">Filters</a> </div> </header> <!--/#header--> <!--#filters--> <nav id="nav" role="navigation"> <div class="block"> <section id="options" class="clearfix combo-filters"> <h3>Filters</h3> <p><a href="#" data-filter-value="*">[ Clear filters ]</a></p> <div class="option-combo categories"> <h4>Categories</h4> <ul class="filter option-set clearfix" data-filter-group="cat" data-option-key="filter"> <? echo '<li><a href="#filter-category-all" data-filter-value="" class="selected">All</a></li>'; foreach ($categories as $category) { $category_class = functions::sanitize($category); echo '<li><a href="#filter-category-'. $category_class . '" data-filter-value=".' . $category_class . '">' . $category . '</a></li>'; } ?> </ul> </div> <div class="option-combo types"> <h4>Type</h4> <ul class="filter option-set clearfix" data-filter-group="type" data-option-key="filter"> <? echo '<li><a href="#filter-type-all" data-filter-value="" class="selected">All</a></li>'; foreach ($types as $type) { $type_class = str_replace(' off','',strtolower($discount_type)); echo '<li><a href="#filter-type-' . $type_class . '" data-filter-value=".' . $type_class . '">' . $discount_type . '</a></li>'; } ?> </ul> </div> </section> <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a> </div> </nav> <!--/#filters--> <!--#main content area--> <div id="main" role="main"> <!--#container for tiles--> <div id="container"> <?PHP foreach ($items as $id => $item) { echo "<div class=\"element $typ $categoryisotope-item\" data-type=\"$typ\" data-category=\"$category\" >"; <h4>$item[name]</h4> <p class=\"category\">$item[cat]</p> <img src=\"$item[url]\" width=\"230\" height=\"175\" alt=\"$item[name]\">"; echo " <p>$item[description]</p>"; echo "</div>\n"; } ?> </div> <!-- /#container for tiles --> <!--#pagination--> <?PHP if (isset($next)): ?> <div class="paginate"> <?PHP echo "<a href=\"index.PHP?p=$next"; if($cat !=''){ echo "&cat=$cat"; } if($type !=''){ echo "&type=$type"; } echo "\">Next</a>"; ?> </div> <?PHP endif?> <!--/#pagination--> </div> <!--/#main content area--> </div> <!--/#inner-wrap--> </div> <!--/#outer-wrap--> <!--/#footer--> <footer> FOOTER </footer> <!--/#footer--> <script src="public/js/main.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="public/js/jquery.isotope.min"></script> <script type="text/javascript" src="public/js/jquery-ias.min.js"></script> <script type="text/javascript" src="public/js/MetroJs.js"></script> <script> var displayItemsNo = 50; $(document).ready(function() { //isotope var $container = $('#container'),filters = {}; $container.isotope({ itemSelector: '.element',}); // filter buttons $('.filter a').click(function(e) { var $this = $(this); // don't proceed if already selected if ($this.hasClass('selected')) { return; } var $optionSet = $this.parents('.option-set'); // change selected class $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // store filter value in object var group = $optionSet.attr('data-filter-group'); filters[ group ] = $this.attr('data-filter-value'); // convert object into array var isoFilters = []; for (var prop in filters) { isoFilters.push(filters[ prop ]) } //show filters var selector = isoFilters.join(''); //count how many results after filter $container.isotope({filter: selector},function($changedItems,instance) { instance.$allAtoms.removeClass('is-filtered'); var itemsno = (instance.$filteredAtoms).length; instance.$filteredAtoms.addClass('is-filtered'); if(itemsno < displayItemsNo){ //get more items to make up 50 var moreno = displayItemsNo - itemsno; /******WHAT DO I DO HERE? SOMETHING LIKE THE BELOW? var getQuery = 'index.PHP?cat=??&type=??'; $.get(getQuery,null,function (data) { $container.isotope('insert',data) }); ********/ } }); //pass filter to next link for infinate scroll //var filter_qry = $this.attr('href'); var filter_qry = $(e.target).text(); var paginate_url = $( '.paginate a ').attr('href'); if(filter_qry == 'All'){ filter_qry = ''; } var next_url = UpdateQueryString(paginate_url,group,encodeURIComponent(filter_qry)); $(".paginate a").attr("href",next_url); return false; }); //end isotope // Infinite Ajax Scroll configuration jQuery.ias({ container : '#main',// main container where data goes to append item: '.element',// single items pagination: '.paginate',// page navigation next: '.paginate a',// next page selector loader: '<img src="public/img/ajax-loader.gif"/>',// loading gif loaderDelay: 200,thresholdMargin: -600,noneleft: 'No more items',//Contains the message to be displayed when there are no more pages left to load triggerPageThreshold: '10',// show "load more" if scroll more than this to stop trigger: "",onLoadItems: function( newElements ) { // hide new items while they are loading var $newElems = $( newElements ).css({ opacity: 0 }); // ensure that images load before adding to isotope layout $newElems.imagesLoaded(function(){ // show elems now they're ready $newElems.animate({ opacity: 1 }); $container.isotope( 'insert',$newElems,true ); }); return true; } }); //end infinate }); </script> </body> </html>
非常感谢,莉娅
解决方法
function loadMoreItems(getQuery) {
$.get(getQuery,function(data) {
container = $('#container',data).eq(0);
if (container) {
var newItemsHTML = "";
newItemsHTML = $( container ).html();
var $newItems = $(newItemsHTML);
$('#container').isotope('insert',$newItems,true);
}
},'html');
}
