Pagination

by spadez

HTML

<div id="content">Original content</div>
<ul id="pagination">
    <li class="active"><a href="pg=1">1</a></li>
    <li><a href="pg=2">2</a></li>
</ul>

CSS

.active {background: pink}

JavaScript

$('a').click(function(event){
    event.preventDefault();
    var number = $(this).attr('href');
    $.ajax({
        url: "/ajax_json_echo/",
        type: "GET",
        dataType: "json",
        timeout: 5000,
        beforeSend: function () {
            $('#content').fadeTo(500, 0.5);
        },
        success: function (data, textStatus) {
            // TO DO: Load in new content
            $('html, body').animate({
                scrollTop: '0px'
            }, 300);
            // TO DO: Change URL
            $('#pagination li.active').removeClass("active");            
            $(this).parent().addClass("active");
        },
        error: function (x, t, m) {
            if (t === "timeout") {
                alert("Request timeout");
            } else {
                alert('Request error');
            }
        },
        complete: function () {
            $('#content').fadeTo(500, 1);
        }
    });    
});