Jump to content


Photo
* * * * - 4 votes

Ajax загрузка страниц

рецепт ajax пагинация pagination jquery

50 replies to this topic

#31 i001

i001
  • JBZoo User (rus)
  • User rate: 46.4
  • posts: 972
  • topics: 76

Posted 08 February 2014 - 16:20

Аналогичная проблема http://shoesshop.net...osen-zima-vesna

замените содержимое скрипта jquery-ias.min 

на это, будет работать, но без тригера, т.е. при скроле будут подгружаться. 


(function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging();var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").scrollTop(curTreshold)}else{s()}})}return f}function s(){n();b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=p()){t(curScrOffset)}}function q(){b(window).unbind("scroll",g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr("href");if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();if(v){v.call(this)}})}function e(w,x){var v=[];b.get(w,null,function(y){b(m.container,y).find(m.item).each(function(){v.push(this)});if(x){x.call(this,y,v)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'><img src='"+m.loader+"'/></div>");loader.hide()}return loader}function o(v){loader=u();el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}function k(){loader=u();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",item:".item",pagination:"#pagination",next:".next",tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{
	haveState=(window.location.hash.substring(0,7)=="#/page/");
	if(haveState){
		pageNum=parseInt(window.location.hash.replace("#/page/",""));
		return{page:pageNum}
	}
}
	return false
};
	this.updateState=function(g,h,f){
		if(d){
			this.replaceState(g,h,f)
		}else{
			this.pushState(g,h,f)
		}
	};
	this.pushState=function(g,h,f){
		if(c){
			history.pushState({ias:g},h,f)
		}else{
			hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash
		}
		d=true
	};
	this.replaceState=function(g,h,f){
		if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery);

  • 0

#32 tchudov

tchudov
  • JBZoo User (rus)
  • User rate: 0
  • posts: 158
  • topics: 27

Posted 08 February 2014 - 16:41

Сайт все ни как не закончу, но этот рецепт как можете увидеть работает. + респонсив(мобилка)  O0

Это именно то, что я хотел. Можете выложить как это сделать здесь? Со всеми файлами? Без триггера и видимой пагинации.

 

Огромное спасибо!


Edited by tchudov, 08 February 2014 - 16:43.

  • 0

#33 Den

Den
  • JBZoo User (rus)
  • User rate: 0
  • posts: 178
  • topics: 47

Posted 08 February 2014 - 17:36

у меня не работает(((


  • 0

#34 Cheren-dow

Cheren-dow
  • JBZoo User (rus)
  • User rate: 95.7
  • posts: 5060
  • topics: 31

Posted 08 February 2014 - 20:02

Можете выложить как это сделать здесь?

Что именно выложить? Я уже и не помню что я там делал(делал давно и потом что то забросили) Можно  же исходный код посмотреть что там в JS написано.

Без триггера

Что то я не пойму что за трегер?)))

видимой пагинации

Она должна автоматом скрываться на сколько я помню.


  • 0
Изображение
 

#35 i001

i001
  • JBZoo User (rus)
  • User rate: 46.4
  • posts: 972
  • topics: 76

Posted 08 February 2014 - 20:17

Что то я не пойму что за трегер?)))

Типа кнопочка "еще", нажимаем и показываются еще товары. У вас они показываются при скроле. 


  • 0

#36 Cheren-dow

Cheren-dow
  • JBZoo User (rus)
  • User rate: 95.7
  • posts: 5060
  • topics: 31

Posted 08 February 2014 - 20:46

ну при желании можно на JS посмотреть(функции там правда абы как названы - тестировал проверял и все осталось как есть зыбыл про этот сайт), что да как я делал. Сейчас уже не помню нужно самому там все вспоминать.


  • 0
Изображение
 

#37 berezhnuy

berezhnuy
  • JBZoo User (rus)
  • User rate: 0
  • posts: 31
  • topics: 8

Posted 09 February 2014 - 20:15

А masonry у когото получилось прикрутить? Репонсив заработал от мазонри, а вот подгрузка нивкакую(((


  • 0

#38 vipdle

vipdle
  • JBZoo User (rus)
  • User rate: 0
  • posts: 34
  • topics: 7

Posted 18 January 2017 - 15:43

А кто-то пробовал реализовать подгрузку новостей не в конец текущего вывода, а вместо текущего вывода, с кликом по номеру страницы?

Например, есть 6 новостей на странице и пагинация "Текущая, 2, 3, 4, .. , Следующая"

Нажимаю "2", - текущие 6 новостей прячутся, а новости второй страницы подгружаются на их место. При этом пагинация сдвигается на одну страницу.


  • 0

#39 registr

registr
  • JBZoo User (rus)
  • User rate: 0
  • posts: 1210
  • topics: 345

Posted 18 February 2017 - 09:26

поставил клиенту на сайт JBZOO, шаблон bootstrap, установил и прописал скрипт, все как по писаному, перед этим на тестовом сайте попробовал - там заработало, а на сайте клиента - нет, ошибок выдается море в файрбаге, но тут я не знаток, может кто подскажет как можно исправить? Сам сайт http://evostone.com.ua/cat

На тестовом http://fashiontm.com.ua/кстати тоже не ахти - медленно добавляется, и карточки то по три то по две (может это и верстка, не знаю...)

И сразу еще вопрос: а как сюда прописать не лоадер а кнопку типа Смотреть еще?

 

И сюда же возник вопрос: а в результатах поиска фильтром подгрузка тоже будет работать?


Edited by registr, 18 February 2017 - 09:34.

  • 0

#40 Rivermc

Rivermc
  • JBZoo User (rus)
  • User rate: 10.1
  • posts: 56
  • topics: 7

Posted 25 February 2017 - 10:52

Великолепная вещь, танцев с бубнами не было. Ожидал подгрузку iframe получил чистый результат. Посмотреть можно здесь http://xn----itbjbeb...-byaz-artpostel

 

Код который я поставил:

/* Ajax loader */

var ias = jQuery.ias({
    container   : ".items",
    item    : ".column",
    pagination  : ".pagination",
    next    : "a.next",
  });

ias.extension(new IASTriggerExtension({
    text: 'Показать еще', // optionally
    html: '<div class="see_all"><p>{text}</p></div>'
}));
ias.extension(new IASSpinnerExtension({
    src: '/images/loading.gif', // optionally
    html: '<div class="ias-spinner" style="text-align: center;"><img src="{src}"/></div>'
}));

  • 4





Also tagged with one or more of these keywords: рецепт, ajax, пагинация, pagination, jquery

Click to return to top of page in style!