Make paging prettier with Jquery

Lets say there is a very large number of pages in my website:

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

And i need to make it prettier (you can check at http://goo.gl/DO1do )

So i was thinking doing something like:

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

this would look like

[1][2][last] //when actual/current is [1]

or

[9][10][11][last] //when is [10]; and so on

But how can i make it look

[1][2][next][..][last]

or

[prev][..][9][10][11][next][..][last]

respectively?

or maybe you have a better idea

-edit-

I edited a bit the code so it looks better

    $(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() + 开发者_StackOverflow社区"</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(">")
});

And can be tested/modified here: http://jsfiddle.net/q2WBG/1/

PD: for SEO terms, i would like to keep alllinks to pages in the HTML

Something like this should work.

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