使用 Jquery 让分页更漂亮

Question

假设我的网站中有大量页面：

<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][last] //当实际/当前是 [1]

或

[9][10][11][last] //当是[10]时；等等

但是我怎样才能让它看起来

[1][2][下一个][..][最后]

或

[上一个][..][9][10] [11][下一个][..][最后一个]

分别是？

或者也许你有更好的主意

-编辑-

我编辑了一些代码，使其看起来更好

    $(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 中页面的所有链接

Answer 1

像这样的东西应该有效。

$(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();
});