Simple Digg like pagination solution with JQuery for Umbraco XSLTs

Featured

Jquery

I wanted to implement Digg like pagination in one of my recent project with Umbraco XSLT lists and I have done it using the pretty JQuery plugin available here

Please note that its not an SEO friendly solution since the pagination is completely relied on JQuery and will not be available if the JavaScript is turned off.. as an alternative for search engines/no-javascript browsers I have added a simple Next Previous navigation inside a <noscript> tag..

Steps

  1. Download and include the jquery.pagination.js and pagination.css in your template
  2. Open jquery.pagination.js and comment line 123 ( //$(‘a’, fragment).click(eventHandler); ) .. Alternatively you can download the altered JQuery plugin from here.
  3. Follow the code sample below or download the XSLT sample- comments are added in each line. If you have any doubts let me know through the comments

 

Getting the Mindset To Start Developing Video Games

Make your programming success

Before you start a coding project or video game project it is very important that you do some prework before you jump into it. One does not simply jump right into video game creation without a brainstorm and a ton of ideas behind their project. I have been through this process a lot of times and I am now willing to share my secrets with you. I did a lot of mistakes when I first started out in this business, and to avoid you to make them in order to learn from them I have decided to collect them here. I will list my mistakes, and good tips. First let me tell a little short story on how one of my trainees managed to come from being nothing to having his own project running within 3 months of time. He did not have any coding or programming experience before contacting me for help. He was very passionated and had a lot of will, what made this guy shine the most was his will to learn more, his drive to get more success is what got him there.

His name is Tim. Back then when he contacted me he was poor, sat at his room all day and according to him he had not achieved something in his life prior to this experience. He wanted to make a change, get his life back on track, get a girlfriend, get buff and all those kind of things. But without a mentor that helps you, this is something that is impossible to do. But I was there for him, learned him some of my tricks, and then he started on something. The thought “What if this will not work out for me?” never passed his mind. This is a very important way to think. You gotta have your mindset with you, and never think “WHAT IF THIS WILL NOT WORK?”. Because yes, there will always be some things that will not work and we gotta realize that. However, if we do not take any action we eliminate the chances of something working and granting the user succes. So the way to go is to grab as many oppurtunities as possible, and then when the final one is there. Go ahead and grab it. Tim went from being a skinny guy with close to no social life to becoming a god. He started interacting with girls, started pumping which resulted in him getting ripped and today he is driving his own project. Garry’s mod free where he is working fulltime as a content developer and programmer.

The morale in this story is that you should always keep on going. Motivation is the way in life, if you really want something you WILL get it. You just gotta want it bad enough. And please remember this.

Go out there and create your own succes, no one will make it for you.

Make your own succes, even in the video game creation. This was it for this time guys. Hoping you like this kind of different content :)

Why do you want a better data paging method with Asp.Net

This is the first of a series of articles am going to write about Asp.Net 2.0 pagination and how to build a custom digg like numeric pagination control which can be used with DataList, Repeater or any other data bound controls.

NOTE: I haven’t used the .Net 3.5 DataPager control yet, so am not sure if it already addressed the scenarios in the following discussion

The default pagination in Asp.net which comes with GridView is great in terms of developer productivity and ease of use. When use with data source controls it will work without even a single line of code and it is easy to customize by setting simple properties available.

But you may need to think about writing a your own pagination logic when

  1. You need pagination with Datalist or Repeater
  2. You need search engine friendly pagination
  3. You need user friendly pagination
  4. You need clean HTML for the pagination links
  5. You need a pagination strip which will work independent of data bound controls

1. Pagination with Datalist or Repeater

I like DataList and Repeater more than GridView because of their design flexibility and the control over rendered HTML. See a comparison between Repeater, DataList and GridView.

Repeater and DataList are light and you have the flexibility over the design, but that comes with a price – no pagination. A Google search for “Repeater pagination” will show the huge number of requests and articles on this subject.

2. Search engine friendly pagination

This is a major issue with the default Asp.Net pagination. The pagination links in GridView are rendered as JavaScript link buttons, not as HTML hyperlinks. As per SEO guidelines search engines can not understand these kinds of JavaScript links. Search engines will not navigate to the inner pages of a GridView and the page crawling will stop in the first page itself.

By using the default pagination with GridView we are unknowingly restricting the search engine crawlers from accessing our pages. Most of the public facing web sites including asp.net forums and MSDN use search engine friendly links for the pagination.

3. User friendly pagination

Yes there are lot of options available to customize the default GridView pagination but the use of three dots (…) to get the next set of pagination is really confusing. Our users had difficulty in understanding the 3 dots are links and clicking on it will generate the next set of pagination links.

Just see how pagination work in some high profile sites

i. Asp.net forums

asp logo

Go to the Getting Started forum and see the pagination in the bottom. It shows a numeric pagination strip with first 5 page links, link to next & last pages and a description. See the 3 dots (…) between next and last links; they are not links but simply telling the user that there is lot of pages hidden in between next and last pages.

As we move along the pages, the pagination strip is also getting changed to show the pages near to the current page.

ii. Digg

Pagination in Digg

In the home, the pagination strip in digg.com is showing first 10 pages, last two pages and previous next buttons. Go to page 10 and we can see the numeric pagination strip is updated to show the pages near to page 10. The pagination strip is also showing links to move to the first two and last two pages at any time.

MSDN forums also use same kind pagination.

iii. Default Asp.Net numeric pagination (sample page link)

Now analyze how the default Asp.Net numeric pagination works. Go to this page and check the pagination. It shows 10 page links and a link to the last page. Click on page 4, no change in the pagination strip. Click on page 10, no change. I want to go to page 11, what should I do? Oh!! the 3 dots are links to next set of pagination.

Just compare the usability of the above 3 paginations. Definitely the first two paginations are lot easier than the third one. Personally I like the Digg pagination most.

4. The rendered HTML is not clean

The pagination strip will render as an inner table to the GridView table with each page links in separate cells. It is not a big issue but why can’t it all be rendered in a single cell without any inner tables?

5. Pagination without bound controls

There are situations in which we may need to simply create pagination links based on the total number of items available.
For example, dividing a big article into a number of pages. The current page can be shown in a literal but the links to rest of the pages need to create separately based on the total number of pages.

GridView pagination is the best choice for admin part of the site

Because of the 2nd and 3rd points explained above we always try to minimize the use of GridView pagination to the admin side of the site. In the admin side it’s logical to use GridView and default pagination wherever possible because

  1. In most cases the admin just want to see the data as a list of items with edit and delete options
  2. The admin may need to sort the data
  3. Admin will be a trained user who can understand the 3 dots are link to next set of pages
  4. The admin side pages are secure and need not come in the search engines

That’s all in the first article about asp.net pagination. In next few days I will write next article on how to create a custom Digg like numeric pagination to solve the above issues.

Thanks for reading! Please give feedback and suggestions