This article provides a simple example of using jQuery along with the jQuery tablesorter and tablesorter.pager plug-ins to provide sorting and paging support for a listview within the context of an ASP.NET MVC application. JQuery has partnered with Microsoft and is now integrated within the IDE to include the availability of intellisense support. The article uses a C# MVC application as an example but all changes made to the example project were strictly limited to writing the markup and are as applicable to a VB.NET based MVC application as they are to C#.
Figure 1: the NerdDinner MVC Application Modified with jQuery's Tablesorter and Pager
Figure 2: The live NerdDinner website with the original list of upcoming dinners
I used the NerdDinner tutorial project as the basis for this project: http://www.nerddinner.com. The original code and a preview of the pending MVC book authored by Hanselman, Guthrie, et al is available for download if youâ€™d care to have a look; at present there does not appear to be a VB version of the project for those interested in that; even through the sample application is in C#, the only added code used on this project is in HTML so, if you are working on a VB based based MVC application, the actual markup discussed in this article is equally applicable to VB:
The original version of this project used the paged list approach to providing table paging; the original project did not include column sorting. In modifying the project, I left in the existing code so that you can comment out or expose the original for comparison.
Rather than using the paged list approach, this example uses jQuery along with the tablesorter and the tablesorter.pager plug-ins. They both may be downloaded from this location: http://tablesorter.com/. jQuery itself, along with the documentation file needed to support intellisense, may be downloaded from here: http://jquery.com/.