Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Постраничная навигация на ajax

Постраничная навигация на ajax


     03.04.2014    Ajax, навигация по страницам, навигация    Общие вопросы по вёрстке, jQuery    6727

вопрос
Доброго времени суток, господа!
Подскажите пожалуйста, как можно поменять стандартную постраничную навигацию DLE, на ajax?
Точный пример здесь.

Постраничная навигация на ajax

24 комментария

budda555
Юзер

budda555 - 3 апреля 2014 14:33 -

Не работает данный код. Dle 10.1.
<script type="text/javascript">
$.ias({
container : '#dle-content', //индетификатор контейнера гду хранятся все новости
item:'.base.shortstory', //набор классов контейнера самой новости
pagination: '.dpad.basenavi.ignore-select', //набор классов контейнера блока постраничной навигации
next: '.nextprev a:last-child', //класс или идентификатор контейнера  постраничной навигации с ссылками где содержится ссылка на  следующую страницу
autoload: false, //включение или отключение автоподзагрузки
loader: '<p><center><font style="cursor:pointer;color:green;font-size:3em;"><i>Загрузить еще</i></font></center></p>' //шаблон кнопки или индикатора загрузки
});
</script>

rocksmart
Юзер

rocksmart - 3 апреля 2014 14:35 -

код твоего navigation.tpl можно глянуть?

budda555
Юзер

budda555 - 3 апреля 2014 14:39 -

Пожалуйста!
<div class="dpad basenavi ignore-select">
    <div class="bnnavi">
        <div class="navigation">{pages}</div>
        <div class="nextprev">
            [prev-link]<span class="thide pprev">Назад</span>[/prev-link]
            [next-link]<span class="thide pnext">Вперед</span>[/next-link]
        </div>
    </div>
</div>

<script type="text/javascript" src="src="{THEME}/js/jquery.ias.js"></script>
<script type="text/javascript">

$.ias({

container : '#dle-content', //индетификатор контейнера гду хранятся все новости

item:'.base.shortstory', //набор классов контейнера самой новости

pagination: '.dpad.basenavi.ignore-select', //набор классов контейнера блока постраничной навигации

next: '.nextprev a:last-child', //класс или идентификатор контейнера  постраничной навигации с ссылками где содержится ссылка на  следующую страницу

autoload: false, //включение или отключение автоподзагрузки

loader: '<p><center><font style="cursor:pointer;color:green;font-size:3em;"><i>Загрузить еще</i></font></center></p>' //шаблон кнопки или индикатора загрузки

});

</script>

budda555
Юзер

budda555 - 3 апреля 2014 15:17 -

Ну, есть идеи?
Если нет, то прошу Вас убрать ответ, так как вопрос остается не решенным.

rocksmart
Юзер

rocksmart - 3 апреля 2014 15:50 -

Скрипт рабочий но не пойму почему конфликт на 10.1


Проверил на 9.6 тоже работает

budda555
Юзер

budda555 - 3 апреля 2014 16:05 -

А как же 10.1?

rocksmart
Юзер

rocksmart - 3 апреля 2014 16:16 -

Смотрю

sadan
Юзер

sadan - 3 апреля 2014 16:27 -

Вот попробуй это:

<center><a onclick="nextPage(); return false;" style="cursor: pointer" class="fbutton"><b>Показать еще</b></a></center>
<div id="ajax-next-page" style="display: none;">
    [next-link][/next-link]
</div>
<script type="text/javascript">
    function nextPage() {
        var nextPage = $('#ajax-next-page a').attr('href');
        ShowLoading("");
        if (nextPage !== undefined) {
            $.ajax({
                url: nextPage,
                success: function(data) {
                    $('#ajax-next-page').remove();
                    $('#next-page').remove();
                    HideLoading("");
                    $('#dle-content').append($('#dle-content', data).html());
                }
            }
                  )
        }
    };
</script>

budda555
Юзер

budda555 - 3 апреля 2014 16:57 -

Так, кнопка появилась, только вот проблема такая, кнопка которая загружает 2-ю страницу остается между 1-й и 2-й загруженной, так я думаю не правильно, она после загрузки должна исчезнуть и еще, если страниц больше нет, не имеет смысла показывать кнопку, вот идеальная схема ajax навигации, я так думаю.

budda555
Юзер

budda555 - 3 апреля 2014 17:01 -

Или, если страниц больше нет, вывести сообщение вместо кнопки.

dj-avtosh
PHP-developer

dj-avtosh - 3 апреля 2014 17:07 -

Будда блин) напиши мне :D

По заказам пишем сюда: @Rud00y

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.):
В телегу писать сразу задачу и бюджет.

budda555
Юзер

budda555 - 3 апреля 2014 17:10 -

Не хочу загружать тебя пустяковыми вопросами. :)

aebot
Юзер

aebot - 11 апреля 2014 20:15 -

как решили проблему??

budda555
Юзер

budda555 - 11 апреля 2014 21:18 -

Как всегда проблему решил, великий программист dj-avtosh

yziker
Юзер

yziker - 11 апреля 2014 22:11 -

Если Вы и dj-avtosh не против, выложите сей творение на обзор людской.

aebot
Юзер

aebot - 11 апреля 2014 23:59 -

присоединяюсь........очень надо. Кнопка дублирует..

dj-avtosh
PHP-developer

dj-avtosh - 12 апреля 2014 11:17 -

Мы сделали много телодвижений по правке шаблонизатора и вывода по ajax только по определённым запросам. Такое не выложишь.

По заказам пишем сюда: @Rud00y

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.):
В телегу писать сразу задачу и бюджет.

aebot
Юзер

aebot - 12 апреля 2014 17:21 -

и какой ценик?)

dj-avtosh
PHP-developer

dj-avtosh - 13 апреля 2014 01:04 -

Никакой. Автор вопроса мой лучший друг.

По заказам пишем сюда: @Rud00y

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.):
В телегу писать сразу задачу и бюджет.

aebot
Юзер

aebot - 13 апреля 2014 01:46 -

печаль, прям кружок дружбанов какой то меж собой диалог повели. Не так уж и много там шаманить то надо было. (заказал на фрилансе)

budda555
Юзер

budda555 - 13 апреля 2014 02:03 -

А тебя сюда никто и не звал, вместо того чтобы тут философствовать пошел бы на фриланс сразу, так как с этим тоном тебе ответы надо покупать.

dj-avtosh
PHP-developer

dj-avtosh - 13 апреля 2014 04:32 -

В следующий раз он просто получит бан.

По заказам пишем сюда: @Rud00y

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.):
В телегу писать сразу задачу и бюджет.

dj-avtosh
PHP-developer

dj-avtosh - 13 апреля 2014 04:34 -

Все подобные модули подгружают заново всю страницу, но ajaxом. А мы пришли к решению загружать только нужные нам блоки, введя в компиляцию второй параметр. Мы за оптимизированный подход - поэтому пришлось повозиться.

По заказам пишем сюда: @Rud00y

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.):
В телегу писать сразу задачу и бюджет.

LazyDev
PHP-developer

LazyDev - 27 июля 2014 12:08 -

Вот вам бесплатная версия от REZER

[aviable=main|cat]
<script language="javascript" type="text/javascript">

    var navAjaxUrlIE = /*@cc_on!@*/false;
    var lastExtNewsUrl = "";
    var lastExtNewsPage = 0;
    var mainClassNewsNavigation = "basenavi"; // navigation.tpl - название класса основного элемента
    function loadExtNews(){
        
        if( lastExtNewsUrl )
            {
                var url = lastExtNewsUrl.replace( "/page/" + lastExtNewsPage, "/page/" + ( lastExtNewsPage + 1 ) ) + "";
                lastExtNewsPage++;
            }
                else
            {
                var url = location.href;
                url = url.replace( new RegExp( "#(.*)", "g" ), "" ) + "";
                
                var RegExpC = new RegExp( "/page/([0-9]+)", "g" );
                if( url.match( RegExpC ) )
                    {
                        var page = url.match( /page\/[0-9]{1,50}/ ) + "";
                        page = parseInt( page.match( /[0-9]{1,50}/ ) );
                        var newPage = page + 1;
                        url = url.replace( "/page/" + page, "/page/" + newPage ) + "";
                        lastExtNewsPage = newPage;
                    }
                        else
                    {
                        url = url + "page/2/";
                        lastExtNewsPage = 2;
                    }
            }
        
        lastExtNewsUrl = url;
        
        $( "#dle-content ." + mainClassNewsNavigation + " a" ).html( "<span>Идёт загрузка...</span>" );
        
        $.ajax({
            url: url,
            data: "",
            success: function( data ){
                
                //var parser = new DOMParser();
                //var doc = parser.parseFromString( data, "text/html" );
                //$( "#dle-content ." + mainClassNewsNavigation ).remove();
                //$( "#dle-content" ).html( $( "#dle-content" ).html() + doc.getElementById( "dle-content" ).innerHTML );
                
                var cont = $( data ).find( "#dle-content" );
                $( "#dle-content ." + mainClassNewsNavigation ).remove();
                $( "#dle-content" ).html( $( "#dle-content" ).html() + $( cont[0] ).html() );  
                $( "#dle-content ." + mainClassNewsNavigation ).html( "<a href=\"#\" onclick=\"loadExtNews(); return false;\" class=\"loadExtNews\"><span>Загрузить ещё</span></a>" );
                
                if( !navAjaxUrlIE ) history.pushState( {}, "", lastExtNewsUrl );
            },
            error: function( xhr, ajaxOptions, thrownError ){
                // Можно по номеру ошибки определять, но в любом случае ответ не тот, показывать нечего, страхуемся )))
                $( "#dle-content ." + mainClassNewsNavigation ).html( "<a href=\"#\" onclick=\"return false;\" class=\"loadExtNews\"><span>Новостей больше нет</span></a>" );
            },
            dataType: "html",
            type: "POST"
        });
    }
    $( document ).ready(
        function(){
            $( "#dle-content ." + mainClassNewsNavigation ).html( "<a href=\"#\" onclick=\"loadExtNews(); return false;\" class=\"loadExtNews\"><span>Загрузить ещё</span></a>" );
        }
    );
</script>
[/aviable]

Мой блог: LazyDev.pro

Помогаю с решением проблем на платной основе.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх