How should i code this paging?

Question

Hi! I've been struggling with some code for a paging for a couple of days (YES! days) now but can't get it to work properly, probably because I don't have any experience on this kind of problems yet.

the paging I'm trying to do should look something like this:

1 2 3 4 5 6 ... 101

When i click on number 5 i would like it to display the numbers like this:

1 ... 3 4 5 6 7 ... 101

when I'm at the last couple of pages i want it to look similar to the first one:

1 ... 96 97 98 99 100 101

The bold number is the page that you're currently viewing.

I want the dots to appear only when there is more than 7 pages available, if not it should look like a normal paging would look like:

1 2 3 4 5 6 7

Right now i want to display 10 items per page.

The language i want to use is C# (ASP.NET) and would like to, later on make this a usercontrol (Where i should set the properties TotalNumberOfItems, ItemsPerPage and so on).

The question: How do i write the code to loop out the numbers on the correct places? :)

Answer 1

How about (Make it Bold is somewhat psuedoCode cause I don't know what UI you're in...)

   private static string BuildPaging(int pageNo, int pageCount)
   {
      StringBuilder sb = new StringBuilder();

      for(int i = 1; i < pageCount; i++)
      {
         if (i == pageNo) 
             sb.Append([Make it Bold] + i.ToString("0") + [Make it not Bold]);
         else if (1 > pageNo - 3 && i < pageNo + 3)
             sb.Append(i.ToString("0"));
         else if ((i == 2 && pageNo > 4) ||        
                  (i == PageCount - 1 && pageNo < PageCount - 2))
             sb.Append("...");
      }
      return sb.ToString();
   }

Only thing is how to make it bold (Depends on whether you're in WinForms or ASP.Net... ... And add stuff to make it a clickable link...

Answer 2

You need maximum pager inner list size (those between dots), page size, documents counter and current page index. Then you can use algorithm like this:

_pagesTotal = DocumentsTotal / DocumentsPerPage;
if ( DocumentsTotal % DocumentsPerPage > 0 )
{
    _pagesTotal++;
}
// we want current page in the middle
// PageBlockMaxSize is the size of those dotted out pages
int halfBlock = PageBlockMaxSize / 2;
if ( CurrentPageIndex > PageBlockMaxSize )
{
    // add some code here to show first page link and following dots
    // ...    
    _firstPageInBlockIndex = CurrentPageIndex - halfBlock;
}
else
{
    // we don't need any dots here
_firstPageInBlockIndex = 1;
}

if ( _pagesTotal - CurrentPageIndex > PageBlockMaxSize )
{
    // here show last page link and preceeding dots. you can use _pagesTotal as it's text
    // ...    
    _lastPageInBlockIndex = CurrentPageIndex + halfBlock;
}
else
{
    // we don't need any dots here
    _lastPageInBlockIndex = _pagesTotal;
}

// hide next-previous buttons if they are not needed
if ( CurrentPageIndex == 1 )
{
    spanPrev.Visible = false;
}
else if ( CurrentPageIndex == _pagesTotal )
{
    spanNext.Visible = false;
}

// and when we are ready we build list of page counters
var pages = new List<int>();
for ( int page = _firstPageInBlockIndex;
      page <= _lastPageInBlockIndex;
      page++ )
{
    pages.Add( page );
}

and then we can databind this list to some repeater or use it some other way to display common links between those dots (or without them).