我在我的PHP项目中使用无限-ajax-scroll(https://github.com/webcreate/infinite-ajax-scroll/blob/master/src/jquery-ias.js),并且滚动与jquery过滤一起运行良好。但是,当应用过滤器时,我最终只能在页面上显示几个项目,而我想加载更多项目而无需激活滚动。
当选择过滤器时,我会计算容器中显示的项目数,如果过滤后少于50项,我想加载更多项目。我想调用infinite-ajax-scroll来执行此操作,因为这已经有一个方法将项目加载到容器中。
对于JQuery而言,我不是一个高级编码器,无法弄清楚jquery-ias.js如何工作并加载更多项目,并且无法解决如何在应用过滤器后利用此类来获得更多结果
我很感激任何建议。
我的jquery:
> $('.filter a').click(function(e) {
//filtering code goes here
> //add selected filter to paginate URL to pass to next page of infinite scroll
> var filter = $(e.target).text();
> var paginate_url = $( '.paginate a ').attr('href');
> var next_url = UpdateQueryString(paginate_url, group, encodeURIComponent(filter));
>
> $(".paginate a").attr("href", next_url);
instance.$allAtoms.removeClass('is-filtered');
instance.$filteredAtoms.addClass('is-filtered');
var itemsno = (instance.$filteredAtoms).length;
if (itemsno < displayItemsNo) {
> //ajax call to load more items with filter applied
>
> //HOW TO DO THIS??
>
>// $.ias.loadItems(next_url); ??
>
}
>
> return false;
> });
> // 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"/>'
> });
答案 0 :(得分:1)
loadItems(url, onCompleteHandler, delay)
方法中已经有一个Ajax调用。
试试这样:
$('.filter a').click(function(e) {
//add selected filter to paginate URL
var filter = $(e.target).text();
var paginate_url = $( '.paginate a ').attr('href');
var next_url = UpdateQueryString(paginate_url, group, encodeURIComponent(filter));
$(".paginate a").attr("href", next_url);
//ajax call to load results with filter applied
//HOW TO DO THIS??
jQuery.ias.loadItems('/yourScript.php?page=1', function(event) { }, 0)
return false;
});
答案 1 :(得分:1)
我从来没有弄清楚如何在类中调用该方法,因此在类之外编写了我自己的函数,这基本上是重复的。
function loadMoreItems(getQuery, loadtype) {
$.get(getQuery, null, function(data) {
container = $('#container', data).eq(0);
if (container) {
var newItemsHTML = "";
newItemsHTML = $( container ).html();
var $newItems = $(newItemsHTML);
if(loadtype == 'add'){
$container.isotope('insert', $newItems, true);
} else if(loadtype == 'replace'){
$container.isotope('remove');
$container.isotope('insert', $newItems, true);
}
}
}, 'html');
}