Formatting an Online Shopping Cart/PayPal System - Product Paging
(Page 4 of 4 )
"Paging" is the process of splitting up the displayed data onto multiple pages and providing navigation between each of them. This can be handled in several ways, and everyone who's used it has their preferred methods.
Sometimes it comes down to the DataSource you're using. Some databases such as PostgreSQL let you perform select queries and return x number of results starting at offset y, so you can do paging directly from your database, which is excellent if you have hundreds, thousands or possibly millions of records to sort through. This feature is not supported by a lot of other database systems, so you can be creative by implementing your own paging on a database with some where clause trickery, or if all else fails and you've had to pull all the records you can still sort them on the server side with the PagedDataSource class. This is pretty neat, but if you're having trouble getting your head around DataTables and DataSets or you're just short on time, you can quickly implement paging with the GridView. Paging is enabled on the product listing via:
AllowPaging="True"
and has the number of items to show per page specified with:
PageSize="3"
There are six products in the demonstration shop so you can see two page links at the bottom of the GridView.
Conclusion
With this article we've looked at how to stylize the GridView to make it fit in with our site design using a number of techniques, including both inline and externally defined CSS as well as directly setting some of the HTML tables attributes. There's a whole host of other properties that can be set to alter the GridView's appearance, which you can see listed here at the MSDN site. Remember that you can pass your own table properties through the GridView, such as the summary property we passed earlier, so you're not restricted to what you can see listed on the GridView property page.
If you're not sure something has been passed correctly, remember that you usually have the "View Source" option with your browser. For IE and Opera you can right click the page and pick "View Source" or do View->Source from the main menu at the top. It's similar for FireFox, except on the right click menu it's called "View Page Source" and with the main menu it's View->Page Source. It's always nice to see what's going on under the hood, as it might give you further insights into better ways to optimize your code.
You've now walked through how to create the DataSource, how to populate your GridView using that data and finally how to decorate it all to tie in with your site's design. Hopefully you've also learned a few of other handy tips which should help you along the way.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
