Digg style custom paging for GridViews in ASP.NET

Posted by andy gaskell on Apr 12th, 2007

I’ve been on a bit of a digg kick lately and I like how they handle paging so I decided to create a GridView control that uses custom paging similar to digg’s. The algorithm is based on this post. As far as html output goes, this should be fairly close to the actual output on digg and I’m using digg’s stylesheet in the demo.

About the algorithm (from Stranger Studios):

  1. The pagination object has a “previous” and “next” button which takes the user to the next page. The previous button is disabled on the first page. Similarly, the next button is disabled on the last page.
  2. The pagination object will always display links to the first two pages and the last two pages of the set.
  3. The pagination object will always display links to the first x (adjacents in the code) pages before and after the current page.
  4. The pagination object will only show at most 5+2x links (first two + prior x + current page + next x + last two). All links not shown will be replaced by …

A little preview:
digg style paging preview

You can download the project here. I didn’t spend a ton of time testing this code, please leave any bug reports in the comments - Thanks!

Update: Changed the code a bit - paging is now handled via query string instead of posting back. Not a huge deal but the code is easier to read.

5 Responses

  1. gaskell.org » Now with 100% more .net Says:

    [...] get things started here’s a live demo of the digg style paging in asp.net project I created.   del.icio.us [...]

  2. Chuck snyder Says:

    Wow, that’s much nicer than the standard numbers. I’ll give it a try in my current project.

    Thanks for the work.

    chuck

  3. Chuck snyder Says:

    Ahhha, with a little tweaking it works just fine. Here is the code converted to VB

    Partial Class _Default
    Inherits System.Web.UI.Page

    Private Const NEXT_PREVIOUS_CLASS As String = “nextprev”
    Private Const CURRENT_CLASS As String = “current”
    Private Const PREVIOUS_TEXT As String = “« Previous”
    Private Const NEXT_TEXT As String = “Next »”

    Dim AllowMultiColumnSorting As Boolean = True

    Dim sortExpression As String

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Me.CurrentPage > 0 Then
    Me.Gridview1.PageIndex = Me.CurrentPage - 1
    Else
    Me.Gridview1.PageIndex = 0
    End If

    End Sub

    #Region “Paging Procedures”

    Private ReadOnly Property CurrentPage() As Integer
    Get
    Dim thispage As Integer
    If Not IsNothing(thispage) Then
    thispage = Convert.ToInt32(Request.QueryString(”Page”))
    If thispage = 0 Then
    thispage += 1
    End If
    End If

    Return thispage
    End Get
    End Property

    Protected Sub Gridview1_DataBound(ByVal sender As Object, ByVal e As EventArgs)
    Dim container As Panel = DirectCast(Gridview1.BottomPagerRow.FindControl(”pagingContainer”), Panel)
    container.Controls.Add(GetPreviousControl())
    Me.AddMainPaging(container)
    container.Controls.Add(GetNextControl())
    End Sub

    Private Sub AddMainPaging(ByVal container As Panel)
    ‘ the number of pages to display
    ‘ around the currently selected page
    Dim adjacents As Integer = 3

    ‘ don’t need to break it up
    If Gridview1.PageCount Me.CurrentPage AndAlso Me.CurrentPage > (adjacents * 2) Then
    ‘ hide on both sides
    Me.AddFirstTwo(container)
    Me.AddRange(Me.CurrentPage - adjacents, Me.CurrentPage + adjacents, container)
    Me.AddLastTwo(container)
    Else
    ‘ hide just the beginning
    Me.AddFirstTwo(container)
    Me.AddRange(Gridview1.PageCount - (2 + (adjacents * 2)), Gridview1.PageCount, container)
    End If
    End If
    End Sub

    Private Sub AddDots(ByVal container As Panel)
    Dim dots As New Label()
    dots.Text = “….”
    container.Controls.Add(dots)
    End Sub

    Private Sub AddFirstTwo(ByVal container As Panel)
    Me.AddRange(1, 2, container)
    Me.AddDots(container)
    End Sub

    Private Sub AddLastTwo(ByVal container As Panel)
    Me.AddDots(container)
    Me.AddRange(Me.Gridview1.PageCount - 1, Me.Gridview1.PageCount, container)
    End Sub

    Private Sub AddRange(ByVal startIndex As Integer, ByVal endIndex As Integer, ByVal container As Panel)
    For i As Integer = startIndex To endIndex
    container.Controls.Add(Me.GetMainControl(i))
    Next
    End Sub

    Private Function GetMainControl(ByVal currentIndex As Integer) As Control
    If Gridview1.PageIndex + 1 = currentIndex Then
    Return GetLabel(currentIndex.ToString(), CURRENT_CLASS)
    Else
    Return GetHyperLink(currentIndex.ToString(), Nothing, String.Format(”~/Default.aspx?Page={0}”, currentIndex))
    End If
    End Function

    Private Function GetPreviousControl() As Control
    If Me.Gridview1.PageIndex

  4. Chuck snyder Says:

    I see there is a text length limit. So, here’s the rest of the vb.net code:
    Private Function GetPreviousControl() As Control
    If Me.gridView.PageIndex

  5. raja Says:

    hello

    Great job ……

    how can use this code ASP.net Ajax enabled paging , should convert the querystring process to postback ?

    code sample please

    thanks in advance

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.