Changing the default Pager

By Kevin Schreiner

January 10, 2009

There are many times when your sites require a more customized look and feel for the standard pager. For example, the ability to place more than one pager in your output.  You can do this with the lxPager HTML element. When AJAX Custom Paging is enabled for your output, you can include as many pagers as you need in your interface.

Currently, only the text and separation values can be handled here, the classes are not overridden. This will be addressed in a future release.

***In a future version, a new pager element will be added to support this method in both AJAX and non-AJAX modes***

To add custom paging elements, just include the following text in the template in as many places as your require:

<lxPager[ModuleID,System]
Pages=9
Back = "BACK "
Next = " NEXT"
Separator = " "
BackSeparator=" "
NextSeparator=" "
Querystring=""
TargetId=""
First = ""
Last = ""
></lxPager[ModuleID,System]>

The attributes can be populated with whatever you want the text to appear as:

Pages: The total number of pages to show within the output  (for example "1 2 3 4 5 6 7 8 9") The current page will always appear in the middle of this list when the total number of displayed pages is greater than the windows site of 9 Pages. i.e., if the current page is 7, and there are  enough pages to show 10 in the list, we might see  3 4 5 6 7 8 9 10 11.

Back: The text to display in the Back link

Next: The text to display in the Next link

Separator: the text to display between page numbers.

Back Separator: the text to display between the Back link and the first page

Next Separator: the text to display between the last page in the window and the Next button

First: the text to display for the link to the First page.

Last: the text to display for the Last page link.

Header: the text to display at the beginning of the pager token

Footer:  the text to display at the end of the pager token.

Page: The text to display for each page in the list, PAGENUMBER will replaced with the physical page number.

Querystring: Any additional values which should be appended to the querystring when the pages are requested.

TargetId: the Id of the target element where the list should be rendered.

In the following example, we want a look and feel that is a bit more customize.

<style>
    .Pages { font-weight: bold; color: green;}
    .Pages a { font-weight: normal; color: gray;}
</style>
<lxPager[ModuleID,System]
Pages="10"
Back = "<span class=Normal>BACK</span>"
Next = " <span class=Normal>NEXT</span>"
Separator = "-"
PageSeparator = " "
BackSeparator="<span class=Pages>"
NextSeparator="</span>"
Page = "<i>PAGENUMBER</i>"
First = "<span class=SubHead>First</span>"
Last = "<span class=SubHead>Last</span>"
Header = "Select a page: ["
Footer = "]"
></lxPager[ModuleID,System]>

The end result looks like this:

Average (1 Ratings):
 
Want to help out?
 
 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share