Javascript pagination

flickr.scala

package controllers {
    
    import play._
    import play.libs._
    import play.mvc._
    
    import models._

    object Application extends Controller {
        
        def items(page: Int = 1) = {
            val xml = WS.url("http://api.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=ace03f8e5764f69326cbf0ea91611900&per_page=15&page=" + page).get().getXml()
            val max = (xml \\ "@pages" text).toInt
            val pages = Range(1, max+1).sliding(7).filter(_.contains(page)).toList.sortBy(e => (e.indexOf(page)-3).abs).first
            val photos = for(photo <- xml \\ "photo") yield Photo( (photo \\ "@id" text).toLong, (photo \\ "@title" text) )
            
            Template("current" -> page, max, pages, photos)
        }

    }
    
}

package models {
    
    case class Photo(id: Long, title: String)
    
}

items.html

#{extends 'main.html' /}
#{set title:'Home' /}

<div id="items">
    <div id="content">
        <div id="mask"></div>
        <table>
            <thead>
                <tr>
                    <th>Photo ID</th>
                    <th>Photo title</th>
                </tr>
            </thead>
            <tbody>
                #{list photos, as:'photo'}
                    <tr>
                        <td>${photo.id}</td>
                        <td>${photo.title}</td>
                    </tr>
                #{/list}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">
                        <span class="current">Page ${current} of ${max}</span>
                        <span class="pages">
                            #{list pages, as:'p'}
                                <a href="@{items(p)}" class="page ${p == current ? 'selected': ''}">${p}</a>
                            #{/list}
                        </span>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>    
</div>

<script type="text/javascript" charset="utf-8">
    $('a.page').live('click', function(e) {
        e.preventDefault()
        var href = $(this).attr('href')
        $('#items').addClass('loading').load(href + ' #content', function() {
            $('#items').removeClass('loading')
        })
    })
</script>