View navigation in Web 2.0 style

When you browse through photo albums on Flickr, there is a very nice navigation system at the bottom of the page:

I liked it so much that I've built my own version in LotusScript.

The HTML

I use more or less the same microformat as Flickr:

<div class="pages">
<a href="/domino/?open&page=6" class="prev">« Prev</a>
<a href="/domino/?open&page=1">1</a>
<span class="break">...</span>
<a href="/domino/?open&page=4">4</a>
<a href="/domino/?open&page=5">5</a>
<a href="/domino/?open&page=6">6</a>
<span class="here">7</span>
<a href="/domino/?open&page=8">8</a>
<a href="/domino/?open&page=9">9</a>
<a href="/domino/?open&page=10">10</a>
<span class="break">...</span>
<a href="/domino/?open&page=17">17</a>
<a href="/domino/?open&page=8" class="next">Next »</a>
<div class="count">(87 posts)</div>
</div>

The CSS

.pages{text-align:center;padding:3px}
.pages a{text-decoration:none;padding:0 5px;border:solid 1px #ccc;color:#00c}
.pages a:hover{background:#66c;color:#fff}
.pages .break,.pages .here{padding:0 2px}
.pages .here{color:#c00;font-weight:bold}
.pages .prev{margin-right:15px}
.pages .next{margin-left:15px}
.pages .count{padding-top:5px}

The LotusScript

I use the stringbuffer class to collect the entries. The function getQuery() gets a parameter from the QUERY_STRING_DECODED field. The parameter vCount is the number of entries per page. I found a very nice php code sample explaining how to do this.

Function viewPage(vc As NotesViewEntryCollection, Byval vCount As Integer, rowNum As Integer)As String
    On Error Goto catch
    Dim entry As NotesViewEntry
    Dim out As New stringbuffer(100)
    Dim tmp As String,i As Integer
    Dim vStart As Integer, pg As String
    
    pg=path & QUERYMARK & |open|
    tmp=getQuery("tag")
    If tmp>"" Then pg=pg & |&amp;tag=| & tmp
    tmp=getQuery("month")
    If tmp>"" Then pg=pg & |&amp;month=| & tmp
    tmp=getQuery("search")
    If tmp>"" Then pg=pg & |&amp;search=| & tmp
    pg=pg & |&amp;page=|
    tmp=getQuery("page")
    If tmp="" Then vStart=0 Else vStart=(Cint(tmp)-1)*vCount
    out.add |<div id="viewbody">|    
    For i=vStart+1 To vStart+vCount
        Set entry=vc.GetNthEntry(i)
        If Not entry Is Nothing Then
            out.add entry.ColumnValues(rowNum)
        End If
    Next
    out.add |</div>|
    
' Flickr style pagination
    Dim vSets As Integer, vThis As Integer, vAdjacents As Integer
    vSets=Cint(vc.count/vCount-1)+1
    vThis=Cint(vStart/vCount)+1
    vAdjacents=3
    out.add |<div class="pages">|
    If vc.count>vCount Then 'we need to show the navigation
        If vThis=1 Then
            out.add |<span class="prev">« Prev</span>|
        Else
            out.add |<a href="| & pg & vThis-1 & |" class="prev">« Prev</a>|
        End If
        If vSets < 7+(vAdjacents*2) Then 'not enough pages to bother breaking it up
            For i=1 To vSets
                If i=vThis Then
                    out.add |<span class="here">| & vThis & |</span>|
                Else
                    out.add |<a href="| & pg & i & |">| & i & |</a>|
                End If
            Next
        Else 'we need to hide some
            If vThis < 1+(vAdjacents*2) Then 'close to beginning: hide later pages
                For i=1 To 4+(vAdjacents*2)
                    If i=vThis Then
                        out.add |<span class="here">| & vThis & |</span>|
                    Else
                        out.add |<a href="| & pg & i & |">| & i & |</a>|
                    End If    
                Next
                out.add |<span class="break">...</span>|
                out.add |<a href="| & pg & vSets-1 & |">| & vSets-1 & |</a>|
                out.add |<a href="| & pg & vSets & |">| & vSets & |</a>|
            Elseif vSets-(vAdjacents*2) > vThis And vThis > (vAdjacents*2) Then ' smack in the middle
                out.add |<a href="| & pg & 1 & |">| & 1 & |</a>|
                out.add |<a href="| & pg & 2 & |">| & 2 & |</a>|
                out.add |<span class="break">...</span>|
                For i=vThis-vAdjacents To vThis+vAdjacents
                    If i=vThis Then
                        out.add |<span class="here">| & vThis & |</span>|
                    Else
                        out.add |<a href="| & pg & i & |">| & i & |</a>|
                    End If    
                Next
                out.add |<span class="break">...</span>|
                out.add |<a href="| & pg & vSets-1 & |">| & vSets-1 & |</a>|
                out.add |<a href="| & pg & vSets & |">| & vSets & |</a>|
            Else 'close to the end: hide pages in the beginning
                out.add |<a href="| & pg & 1 & |">| & 1 & |</a>|
                out.add |<a href="| & pg & 2 & |">| & 2 & |</a>|
                out.add |<span class="break">...</span>|
                For i=vSets-(2+(vAdjacents*2)) To vSets
                    If i=vThis Then
                        out.add |<span class="here">| & vThis & |</span>|
                    Else
                        out.add |<a href="| & pg & i & |">| & i & |</a>|
                    End If    
                Next
            End If
        End If    
        If vThis=vSets Then
            out.add |<span class="next">Next »</span>|
        Else    
            out.add |<a href="| & pg & (vThis+1) & |" class="next">Next »</a>|
        End If
    End If
    out.add |<div class="count">(| & vc.Count & | posts)</div>|
    out.add |</div>|
    
    Goto finally
catch:
    Error Err, Error & " in " & Getthreadinfo(1) & ", line " & Erl    
    Resume finally
finally:
    viewPage=out.collapse(NEWLINE)
End Function

The result can be seen on the bottom of my homepage.