Jump to content


Photo
* * * * * 2 votes

Бесконечный скролл (подгрузка айтемов вместо пагинации)

infinite scroll scroll скролл бесконечный цикл ajax ajax scroll pagination в jbzoo подгрузка айтемов items рецепт

41 replies to this topic

#11 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 30 March 2016 - 07:44

Спасибо, но по старой теме пытался сделать еще тогда и что-то не получилось. Видимо не разобрался как пагинацию менять.

 

по ссылке объяснение, что при обновлении все может слететь.

if ($this->_current < $this->_pages) {

добавлять класс надо тут?

 

Не очень понял ваше сообщение 

 

pagination.php по адресу выше

Строка 210-230

 if ($this->_current > 1) {
                $link  = $url;
                $html .= '<a class="start" href="'.JRoute::_($link).'">&lt;&lt;</a>&nbsp;';
                $link  = $this->_current - 1 == 1 ? $url : $this->link($url, $this->_name.'='.($this->_current - 1));
                $html .= '<a class="previous" href="'.JRoute::_($link).'">&lt;</a>&nbsp;';
            }

            for ($i = $range_start; $i <= $range_end; $i++) {
                if ($i == $this->_current) {
                    $html .= '[<span>'.$i.'</span>]';
                } else {
                    $link  = $i == 1 ? $url : $this->link($url, $this->_name.'='.$i);
                    $html .= '<a  href="'.JRoute::_($link).'">'.$i.'</a>';
                }
                $html .= "&nbsp;";
            }

            if ($this->_current < $this->_pages) {
                $link  = $this->link($url, $this->_name.'='.($this->_current + 1));
                $html .= '<a class="next" href="'.JRoute::_($link).'">&gt;&nbsp;</a>&nbsp;';
                $link  = $this->link($url, $this->_name.'='.($this->_pages));
                $html .= '<a class="end" href="'.JRoute::_($link).'">&gt;&gt;&nbsp;</a>&nbsp;';
            }

вот тут класс next делаем


Edited by isay777, 03 April 2016 - 10:23.

  • 1
ХОСТИНГ для сайтов jbzoo (все попугаи)

#12 tchudov

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

Posted 30 March 2016 - 18:15

Спасибо!


  • 0

#13 tchudov

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

Posted 03 April 2016 - 09:57

Как-то странно скрипт себя ведет. Не подгружает другие страницы, а зацикливает и подгружает одно и то-же снова и снова.

 

http://discoverportu...plyazhi-algarve

 

Joomla: 3.5.0 JBZoo: 2.2.4 Pro rev3086 Zoo: 3.3.14WidgetKit: 1.4.7

 

скрипт

	<script type="text/javascript">
	
	   var ias = jQuery.ias({
      container:  '.items', //класс где выводятся все айтемы
      item:       '.column', //класс одного айтема или строки с айтемами (у меня например row)
      pagination: '.pagination', //класс пагинации для того чтоб скрыть её
      next:       '.next', // класс ссылки в пагинации для загрузки след страницы
      delay: 1000
});
    
    
ias.extension(new IASSpinnerExtension({
    src: '/images/loader.gif', // адрес лоадера для красоты
}));

 ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em></em></p></div>'}));
    //текст когда айтемы закончатся по желанию 


	</script>

pagination.php

<?php
/**
 * @package   com_zoo
 * @author    YOOtheme http://www.yootheme.com
 * @copyright Copyright (C) YOOtheme GmbH
 * @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
 */

/**
 * Class to provide pagination functionalities
 *
 * @package Framework.Classes
 */
class AppPagination {

	/**
	 * A reference to the global App object
	 *
	 * @var App
	 * @since 1.0.0
	 */
	public $app;

	/**
	 * Name of the paging http GET variable
	 *
	 * @var string
	 * @since 1.0.0
	 */
	protected $_name;

	/**
	 * The total item count
	 *
	 * @var int
	 * @since 1.0.0
	 */
	protected $_total;

	/**
	 * The current page number
	 *
	 * @var int
	 * @since 1.0.0
	 */
	protected $_current;

	/**
	 * The number of items per pag
	 *
	 * @var int
	 * @since 1.0.0
	 */
	protected $_limit;

	/**
	 * The range for the displayed pagination pages
	 *
	 * @var int
	 * @since 1.0.0
	 */
	protected $_range;

	/**
	 * The total number of pages
	 *
	 * @var int
	 * @since 1.0.0
	 */
	protected $_pages;

	/**
	 * If we are showing all the items
	 *
	 * @var boolean
	 * @since 1.0.0
	 */
	protected $_showall = false;

	/**
	 * Constructor
	 *
	 * @param string $name The name of the pagination http GET variable
	 * @param int $total The total number of items
	 * @param int $current The current page (default: 1)
	 * @param int $limit The number of items per page (default: 10)
	 * @param int $range The range for the displayed page (default: 5)
	 */
	public function __construct($name, $total, $current = 1, $limit = 10, $range = 5) {

		// init vars
		$this->_name    = $name;
		$this->_total   = (int) max($total, 0);
		$this->_current = (int) max($current, 1);
		$this->_limit   = (int) max($limit, 1);
        $this->_range   = (int) max($range, 1);
		$this->_pages   = (int) ceil($this->_total / $this->_limit);

        // check if current page is valid
        if ($this->_current > $this->_pages) {
            $this->_current = $this->_pages;
        }

	}

    public function name() {
        return $this->_name;
    }

    public function total() {
        return $this->_total;
    }

    public function current() {
        return $this->_current;
    }

    public function limit() {
        return $this->_limit;
    }

    public function range() {
        return $this->_range;
    }

    public function pages() {
        return $this->_pages;
    }

	/**
	 * Get the show all items flag
	 *
	 * @return boolean True if we have to show all the items
	 *
	 * @since 1.0.0
	 */
	public function getShowAll() {
		return $this->_showall || $this->_pages < 2;
	}

 	/**
	 * Set the show all items flag
	 *
	 * @param boolean $showall If we have to show all the items
	 *
	 * @since 1.0.0
	 */
	public function setShowAll($showall) {
		$this->_showall = $showall;
	}

	/**
	 * Get the current limit start
	 *
	 * @return int The current limit start
	 *
	 * @since 1.0.0
	 */
	public function limitStart() {
		return ($this->_current - 1) * $this->_limit;
	}

	/**
	 * Get the link with the added GET parameters
	 *
	 * @param string $url The url to which we should add the GET parameter
	 * @param mixed $vars A list of variables to add to the url
	 *
	 * @return string The url with the added GET parameters
	 *
	 * @since 1.0.0
	 */
	public function link($url, $vars) {

		if (!is_array($vars)) {
			$vars = array($vars);
		}

		return $url.(strpos($url, '?') === false ? '?' : '&').implode('&', $vars);
	}

	/**
	 * Render the pagination
	 *
	 * @param string $url The url of the page on which we're adding the pagination
	 *
	 * @return string The html code of the pagination
	 *
	 * @since 1.0.0
	 */
    public function render($url = 'index.php', $layout = null) {

        $html = '';

        // check if show all
        if ($this->_showall) {
            return $html;
        }

        // check if current page is valid
        if ($this->_current > $this->_pages) {
            $this->_current = $this->_pages;
        }

        if ($this->_pages > 1) {

            $range_start = max($this->_current - $this->_range, 1);
            $range_end   = min($this->_current + $this->_range - 1, $this->_pages);

             if ($this->_current > 1) {
                $link  = $url;
                $html .= '<a class="start" href="'.JRoute::_($link).'">&lt;&lt;</a>&nbsp;';
                $link  = $this->_current - 1 == 1 ? $url : $this->link($url, $this->_name.'='.($this->_current - 1));
                $html .= '<a class="previous" href="'.JRoute::_($link).'">&lt;</a>&nbsp;';
            }

            for ($i = $range_start; $i <= $range_end; $i++) {
                if ($i == $this->_current) {
                    $html .= '[<span>'.$i.'</span>]';
                } else {
                    $link  = $i == 1 ? $url : $this->link($url, $this->_name.'='.$i);
                    $html .= '<a class="next" href="'.JRoute::_($link).'">'.$i.'</a>';
                }
                $html .= "&nbsp;";
            }

            if ($this->_current < $this->_pages) {
                $link  = $this->link($url, $this->_name.'='.($this->_current + 1));
                $html .= '<a  href="'.JRoute::_($link).'">&gt;&nbsp;</a>&nbsp;';
                $link  = $this->link($url, $this->_name.'='.($this->_pages));
                $html .= '<a class="end" href="'.JRoute::_($link).'">&gt;&gt;&nbsp;</a>&nbsp;';
            }


        }

        return $html;
    }
}

Edited by tchudov, 03 April 2016 - 10:03.

  • 0

#14 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 03 April 2016 - 10:22

Перенесите класс next в pagination 

12135655.png

Мне кажетс я ошибся. 

Отпишитесь если получилось


Edited by isay777, 03 April 2016 - 10:25.

  • 1
ХОСТИНГ для сайтов jbzoo (все попугаи)

#15 tchudov

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

Posted 03 April 2016 - 10:27

Спасибо, вроде заработало!


  • 0

#16 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 03 April 2016 - 10:34

Спасибо, вроде заработало!

я рад! 


  • 1
ХОСТИНГ для сайтов jbzoo (все попугаи)

#17 daler

daler
  • JBZoo User (rus)
  • User rate: 0.9
  • posts: 31
  • topics: 12

Posted 14 June 2016 - 15:08

*
POPULAR

		var ias = jQuery.ias({
			container:  '.items', //класс где выводятся все айтемы
			item:       '.row', //класс одного айтема или строки с айтемами (у меня например row)
			pagination: '.pagination-box', //класс пагинации для того чтоб скрыть её
			next:       '.next', // класс ссылки в пагинации для загрузки след страницы
			delay: 500
		});


                //кнопка
		ias.extension(new IASTriggerExtension({
			html: '<div class="showmore" style="text-align: center; cursor: pointer;"><a class="show_more">Показать больше</a></div>', // optionally
		}));


                //картинка лоадера
		ias.extension(new IASSpinnerExtension({
			html: '<div class="showmore" ><img src="/images/reload.gif"/></div>', // optionally
		}));

		ias.extension(new IASNoneLeftExtension({html: ''}));
		//текст когда айтемы закончатся по желанию

можно написать так. при прокрутке, сначала появится кнопка, по нажатию на которую начнет грузиться следующая страница, а а пока все грузится появится лоадер

 


  • 7

#18 mr.varhola

mr.varhola
  • JBZoo User (rus)
  • User rate: 1.9
  • posts: 514
  • topics: 116

Posted 03 August 2016 - 04:18

Столкнулся с двумя проблемами:

1) Лоадер не отображался, как только пути не писал

2) Значение delay не изменяет время задержки

Первый вопрос решил так:

    var ias = jQuery.ias({
          container:  '.items', //класс где выводятся все айтемы
          item:       '.rborder', //класс одного айтема или строки с айтемами (у меня например row)
          pagination: '.pagination', //класс пагинации для того чтоб скрыть её
          next:       '.next', // класс ссылки в пагинации для загрузки след страницы
          loader:     '<div style="text-align:center;"><img style="width: 30px;" src="/templates/port_import/img/squares.gif"></div>',
          delay: 5000
    })

Но что делать с задержкой ума не приложу - прошу помощи у знатоков

Реализация пока тут: http://port-import.w...ness-ideas.html


Edited by mr.varhola, 03 August 2016 - 04:18.

  • 0

#19 mr.varhola

mr.varhola
  • JBZoo User (rus)
  • User rate: 1.9
  • posts: 514
  • topics: 116

Posted 03 August 2016 - 04:32

Проблема с лоадером была по причине, что функции не отрабатывают по какой-то причине

ias.extension(new IASSpinnerExtension({
    src: '/images/squares.gif', // адрес лоадера для красоты
}));
     ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>Это конец </em></p></div>'}));
    //текст когда айтемы закончатся по желанию 

  • 0

#20 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 03 August 2016 - 05:14

 

Проблема с лоадером была по причине, что функции не отрабатывают по какой-то причине

ias.extension(new IASSpinnerExtension({
    src: '/images/squares.gif', // адрес лоадера для красоты
}));
     ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>Это конец </em></p></div>'}));
    //текст когда айтемы закончатся по желанию 

 

У тебя в консоли ias.extension выдает ошибку. По какой причине не могу понять . 

Кажется причина в разметки js


Edited by isay777, 03 August 2016 - 05:15.

  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)





Also tagged with one or more of these keywords: infinite scroll, scroll, скролл, бесконечный цикл, ajax, ajax scroll, pagination в jbzoo, подгрузка айтемов, items, рецепт

Click to return to top of page in style!