Сделайте пейджинг красивее с помощью Jquery - PullRequest
Новая
       16

Сделайте пейджинг красивее с помощью Jquery

0 голосов
/ 09 сентября 2011

Допустим, на моем веб-сайте очень много страниц: 

<div class="caja_paginas">
    <ul class="paginas"> 
        <li class="actual"><a href="/?tipo=links&amp;que=ultimas&amp;page=1">1</a></li>
        <li><a href="/?tipo=links&amp;que=ultimas&amp;page=2">2</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=3">3</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=4">4</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=5">5</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=6">6</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=7">7</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=8">8</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=9">9</a></li>
          <!-- commented but i have like 1420 pages lol -->
         </ul>
</div>

И мне нужно сделать его красивее (вы можете проверить на http://goo.gl/DO1do)

Итак, я думал сделать что-то вроде: 

$(document).ready(function(){
    $('.caja_paginas ul.paginas li').hide();
    $('.caja_paginas ul.paginas li.actual').show();
    $('.caja_paginas ul.paginas li.actual').next('li').show();
    $('.caja_paginas ul.paginas li.actual').prev('li').show();
    $('.caja_paginas ul.paginas li').last().html('last').show();
});

это будет выглядеть как

[1] [2] [последний] // когда факт / ток[1]

или

[9] [10] [11] [последний] // когда равен [10];и так далее

Но как мне заставить его выглядеть

[1] [2] [далее] [..] [последний]

или

[предыдущий] [..] [9] [10] [11] [следующий] [..] [последний]

соответственно?

или, может быть, у вас есть идея получше

-edit-

Я немного отредактировал код, чтобы он выглядел лучше 

    $(document).ready(function ()
{
    var actual = $(".caja_paginas ul.paginas li.actual a").text();
    var actual_html = $(".caja_paginas ul.paginas li.actual").html();
    var ultima = $(".caja_paginas ul.paginas li a").last().text();
    var actual_html = $(".caja_paginas ul.paginas li.actual").last().html();
    $(".caja_paginas #ellipsis").remove();
    $(".caja_paginas ul.paginas li").hide();
    $(".caja_paginas ul.paginas li.actual").show();
    $(".caja_paginas ul.paginas li.actual").next("li").show().after('<li id="ellipsis">...</a></li>');
    $(".caja_paginas ul.paginas li.actual").prev("li").show();
    $(".caja_paginas ul.paginas li").first().show();
    if (actual > 4)
    {
        $(".caja_paginas ul.paginas li").first().after('<li id="ellipsis">...</a></li>');
        $(".caja_paginas ul.paginas").prepend("<li>" + $(".caja_paginas ul.paginas li.actual").prev().html() + "</li>");
        $(".caja_paginas ul.paginas li a").first().text("<")
    }
    $(".caja_paginas ul.paginas li").last().show();
    $(".caja_paginas ul.paginas").append("<li>" + $(".caja_paginas ul.paginas li.actual").next().html() + "</li>");
    $(".caja_paginas ul.paginas li a").last().text(">")
});

И его можно протестировать / изменитьздесь: http://jsfiddle.net/q2WBG/1/

PD: для SEO, я хотел бы сохранить все ссылки на страницы в HTML

1 Ответ

1 голос
/ 09 сентября 2011

Как-то так должно работать. 

$(document).ready(function(){
    // Remove for in case you want to update it ever with JS
    $('.caja_paginas #ellipsis').remove();
    $('.caja_paginas ul.paginas li').hide();
    $('.caja_paginas ul.paginas li.actual').show();
    $('.caja_paginas ul.paginas li.actual').next('li').show().append('<li id="ellipsis">...</a></li>');
    $('.caja_paginas ul.paginas li.actual').prev('li').show();
    $('.caja_paginas ul.paginas li').last().html('last').show();
});
...