Технический сбой

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

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


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

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

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

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

budda555
Юзер

budda555 - -

Не работает данный код. 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 - -

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

budda555
Юзер

budda555 - -

Пожалуйста!
<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 - -

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

rocksmart
Юзер

rocksmart - -

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


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

budda555
Юзер

budda555 - -

А как же 10.1?

rocksmart
Юзер

rocksmart - -

Смотрю

sadan
Юзер

sadan - -

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

<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 - -

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

budda555
Юзер

budda555 - -

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

dj-avtosh
PHP-developer

dj-avtosh - -

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

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

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

budda555
Юзер

budda555 - -

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

aebot
Юзер

aebot - -

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

budda555
Юзер

budda555 - -

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

yziker
Юзер

yziker - -

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

aebot
Юзер

aebot - -

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

dj-avtosh
PHP-developer

dj-avtosh - -

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

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

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

aebot
Юзер

aebot - -

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

dj-avtosh
PHP-developer

dj-avtosh - -

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

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

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

aebot
Юзер

aebot - -

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

budda555
Юзер

budda555 - -

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

dj-avtosh
PHP-developer

dj-avtosh - -

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

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

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

dj-avtosh
PHP-developer

dj-avtosh - -

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

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

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

LazyDev
PHP-developer

LazyDev - -

Вот вам бесплатная версия от 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

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

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

наверх