I just created an xslt with paging. I used the example at http://www.nibble.be/?p=11. Now that's it's finished I'm not really happy with it. If I had build this xslt page in an UserControl with a gridview paging would have been a lot easier. It would need a lot less code to produce paging and I could use ajax updatepanels to create smooth paging (instead of a full postback with an extra querystring as in xslt). Now is my question: For the next time I create a page with paging what should I use? I just read data from umbraco.config so xslt would be perfect, but the paging is done much better in a UserControl. I'd like to hear other people their opinion.
Default gridview paging isn't SEO friendly, uses viewstate and don't work without jscript, but is easy to develop.
XSLT paging is harder to create, but it should be seo and no-javascript friendly. You can try use some jquery plugin to do paging with ajax bor better user experience.
+1 got the xslt paging example, and I think that having the page number in the querystring is better from both an seo and usability perspective. "Power users" may want to jump to a particular page by adjusting the querystring, and googlebot will know that they are different pages based on the url.
I'd avoid using javascript for paging. It can be quick and easier to set up than XSLT paging, but has accessibility issues, usability issues and will increase the load time of your page for potentially no reason i.e. if someone just wants the first page, they're forced to have all of the records loaded but hidden. I recently built a simple XLST paging script and keep meaning to blog a simple tutorial about it - must get around to doing that!
I created a usercontrol which fetches the new rows on each postback (so it doesn't load all the records). With this I can combine nice ajax paging and I create fast paging because only the displayed rows are fetched. In my opinion it has both advantages of xslt paging and javascript paging. Only problem is the SEO.
Thanks for all the great tips! I guess you can use xslt paging and UserControl gridview paging for different situations:
Xslt paging: If the data is stored inside xml (umbraco.config) you should use xslt paging.
UserControl gridview: If the data is fetched directly from a database (like products of a webshop) you can fetch them in C# and use a gridview on a UserControl.
I'm starting a new project were I need paging again, but I'm not sure which approch is the best right now. I'm going to use XSLT paging, but I'd like the possibility of using a querystring for making it seo friendly and also use javascript for making it user friendly (like an ajax updatepanel). Should I do full postbacks with a querystring, use javascript for paging or is there a good combination for both of these?
Are there perhaps some new blogs about this or does someone have more good examples?
Incorporating jQuery into the XSLT paging can be pretty easy. One way I have done it before is, for the page with the paged list on, create a second teamplate in Umbraco that ONLY outputs the contents of the paged list and associate it with the Document Type for the page. You can than use jQuery to automaticaly attach a click event to the pager controls to load the content of the page, using the new template (Read more on how to do this here http://www.nibble.be/?p=42) and then just replace the lists html with the result.
I'm sure there are other ways, but this has worked well for me, as it works fine without JS, but you get an "enhanced" experience if you do have JS. Just the way JS should be.
I'm not sure I follow you. You use a different template for paging? That's a complete different approach from Tim's example (http://www.nibble.be/?p=11) right? Do you have some examples or some code how you do this? It's seems like an interesting solution.
Sure, I'll send you a link shortly (Sorry I can't put it on here, but the sites not live yet).
But the main Idea is to develop the paged content as usual just using XSLT. Once you have this working, you basicaly create a new template which is basicaly a "cut out" of the html for the page content block, ie:
If you now assign both these templates to you doc type, you can switch templates simply by modifying the url as in nibles example. So, say you have the URL:
Wow this is great! This is a brilliant combination of Umbraco templates, xslt and jQuery. I've got 1 final question. Is this also seo friendly? Can the pages also be viewed by changing the querystring manually? I tried it on the link you sended, but couldn't get it working. Maybe I did something wrong?
Thank you Matt for all your help. I'll mark your post a the solution :).
It should all be SEO friendly as the jQuery is an unobtrusive extension. Without JS, it falls back to the regular XSLT paged content (ie, using the querystring to change page). Modifying the url should also work (Just add ?page=n on the end).
You're right. I've tested it and it's also SEO friendly. This means it's perfect! Now all I've gotta do is try the same thing for the ASP.NET Gridview in UserControls (for when the data is not available in xml), but that´s another story :).
Xslt paging vs UserControl gridview
Hello,
I just created an xslt with paging. I used the example at http://www.nibble.be/?p=11. Now that's it's finished I'm not really happy with it. If I had build this xslt page in an UserControl with a gridview paging would have been a lot easier. It would need a lot less code to produce paging and I could use ajax updatepanels to create smooth paging (instead of a full postback with an extra querystring as in xslt). Now is my question: For the next time I create a page with paging what should I use? I just read data from umbraco.config so xslt would be perfect, but the paging is done much better in a UserControl. I'd like to hear other people their opinion.
Jeroen
It depends on scenario.
Default gridview paging isn't SEO friendly, uses viewstate and don't work without jscript, but is easy to develop.
XSLT paging is harder to create, but it should be seo and no-javascript friendly. You can try use some jquery plugin to do paging with ajax bor better user experience.
Petr
Thanks Petr. Do you know where I can find a sample of xslt paging in combination with jquery? It sounds interesting.
Hi try look at http://trirand.com/blog/jqgrid/jqgrid.html for example, it has option to load data as xml
Thanks for the example. Is there somebody else who would like to give the pros and cons?
+1 got the xslt paging example, and I think that having the page number in the querystring is better from both an seo and usability perspective. "Power users" may want to jump to a particular page by adjusting the querystring, and googlebot will know that they are different pages based on the url.
Dan
I'd avoid using javascript for paging. It can be quick and easier to set up than XSLT paging, but has accessibility issues, usability issues and will increase the load time of your page for potentially no reason i.e. if someone just wants the first page, they're forced to have all of the records loaded but hidden. I recently built a simple XLST paging script and keep meaning to blog a simple tutorial about it - must get around to doing that!
I created a usercontrol which fetches the new rows on each postback (so it doesn't load all the records). With this I can combine nice ajax paging and I create fast paging because only the displayed rows are fetched. In my opinion it has both advantages of xslt paging and javascript paging. Only problem is the SEO.
In this page: http://www.petersen-tegl.dk/referencer/liste.aspx i just list out all the references with xslt, and then create a paging table with jquery table pager: http://slashjquery.com/tablepager/index.html
Pros: It's SEO friendly, and i doesn't break without javascripts, just displays a long table
Cons: It displays a long table which might collide with page layout.
Regards
Jesper Hauge
Thanks for all the great tips! I guess you can use xslt paging and UserControl gridview paging for different situations:
Xslt paging: If the data is stored inside xml (umbraco.config) you should use xslt paging.
UserControl gridview: If the data is fetched directly from a database (like products of a webshop) you can fetch them in C# and use a gridview on a UserControl.
I'm starting a new project were I need paging again, but I'm not sure which approch is the best right now. I'm going to use XSLT paging, but I'd like the possibility of using a querystring for making it seo friendly and also use javascript for making it user friendly (like an ajax updatepanel). Should I do full postbacks with a querystring, use javascript for paging or is there a good combination for both of these?
Are there perhaps some new blogs about this or does someone have more good examples?
Thanks
Jeroen
Hi Jeroen,
Incorporating jQuery into the XSLT paging can be pretty easy. One way I have done it before is, for the page with the paged list on, create a second teamplate in Umbraco that ONLY outputs the contents of the paged list and associate it with the Document Type for the page. You can than use jQuery to automaticaly attach a click event to the pager controls to load the content of the page, using the new template (Read more on how to do this here http://www.nibble.be/?p=42) and then just replace the lists html with the result.
I'm sure there are other ways, but this has worked well for me, as it works fine without JS, but you get an "enhanced" experience if you do have JS. Just the way JS should be.
Matt
Hi Matt,
I'm not sure I follow you. You use a different template for paging? That's a complete different approach from Tim's example (http://www.nibble.be/?p=11) right? Do you have some examples or some code how you do this? It's seems like an interesting solution.
Jeroen
Just had a tweet from Warren about using /Base with jQuery.load. Not sure how that works. Can someone provide me with some samples of this?
Sure, I'll send you a link shortly (Sorry I can't put it on here, but the sites not live yet).
But the main Idea is to develop the paged content as usual just using XSLT. Once you have this working, you basicaly create a new template which is basicaly a "cut out" of the html for the page content block, ie:
StandardTemplate
AjaxTemplate
If you now assign both these templates to you doc type, you can switch templates simply by modifying the url as in nibles example. So, say you have the URL:
http://www.mydomain.com/paged-content.aspx
You can get jQuery to grap that URL, add the template on to the query string
http://www.mydomain.com/paged-content.aspx?alttemplate=ajaxtemplate
And use the jQuery load command to load the content into place:
$("paged-content").load(ajaxUrl)Do this for all the pager controls, and you paged list is now jQuery powered.
Cheers
Matt
Do, the second url got modified for some reason, it should read:
http://www.mydomain.com/paged-content.aspx ? alttemplate=ajaxtemplate
Wow this is great! This is a brilliant combination of Umbraco templates, xslt and jQuery. I've got 1 final question. Is this also seo friendly? Can the pages also be viewed by changing the querystring manually? I tried it on the link you sended, but couldn't get it working. Maybe I did something wrong?
Thank you Matt for all your help. I'll mark your post a the solution :).
Jeroen
Ho Jeroen,
It should all be SEO friendly as the jQuery is an unobtrusive extension. Without JS, it falls back to the regular XSLT paged content (ie, using the querystring to change page). Modifying the url should also work (Just add ?page=n on the end).
Many thanks
Matt
Hi Matt,
You're right. I've tested it and it's also SEO friendly. This means it's perfect! Now all I've gotta do is try the same thing for the ASP.NET Gridview in UserControls (for when the data is not available in xml), but that´s another story :).
Jeroen
Glad I could help.
Matt
is working on a reply...