MVC3 Pagination, items per page - asp.net-mvc

Question

I have to implement pagination, number of Items per page and sorting for my MVC3 application.
In my view page I have a List of Items that is coming from the Model. I will be displaying a number of Items (defined by the user) each inside div, per each page. I'm not building a table.
I know that mvccontrib can build a table with paging, and not sure if that pagination can be styled at all, cause I have to style mine. What is a good approach to solve this?

Answer 1

Check out PagedList (available as a nuget package). I found it really mvc-friendly so far.

Answer 2

For server side paging, I use https://github.com/dvsspr/Halaman.
It is not documented yet, but it is very flexible and it uses fluent configuration.
One very simple use case for you.
#Controller
public ActionResult Index(AdminPageInfo page, SortInfo sort)
{
PagedData<Account> model = accountRepository.Get().AsPagedData(page, sort);
return (model.IsValid) ? View(model) : View("_Error");
}
#View
#model PagedData<Account>
#{
ViewBag.Title = "Account Index";
}
<p>
Total records: <strong>#Model.TotalRows</strong>
<br />
Total pages: <strong>#Model.TotalPages</strong>
<br />
Total records in current page: <strong>#Model.TotalRowsInPage</strong>
</p>
#Html.Pager(Model)
#Html.Sizer(Model) #* Page size changer helper =) *#
#*
Put a dot after the closing brace and you will see the available options.
*#
<h3>Sorter</h3>
<li>
<ul>#(Html.SortLink<Account>(zz => zz.Id, Model, "User Id"))</ul>
<ul>#(Html.SortLink<Account>(zz => zz.UserName, Model, "User Name"))</ul>
<ul>#(Html.SortLink<Account>(zz => zz.FullName, Model, "Full Name"))</ul>
</li>
#foreach (var acc in Model) {
<p>
User name: #acc.UserName
<br />
Full name: #acc.FullName
</p>
}
That's it.
IMHO, the codebase can be hacked easily - just in case you want to implement hybrid paging.

Answer 3

With plain HTML, you can use the Webgrid help in WebMatrix. It has paging support out of the box with MVC.
http://msdn.microsoft.com/en-gb/magazine/hh288075.aspx
Otherwise, any of the major Javascript components (jqgrid, extjs, etc.) can do paging, all depending on what your model source is. If you implement an AJAX datasource, then you need to pass the paging properties back and forth, so the paging can be done server-side efficiently (depending on your database backend).

Answer 4

If you're looking for a primarily client-side solution, I have never had any problems with jQuery's Tablesorter with Paginator plugin: http://tablesorter.com/docs/example-pager.html
If you want to do this server side, the general approach is that you are going to cache the entire result-set server side*, then make (ajax or otherwise) calls to the server specifying which records are needed. You'll pass a starting index and a number of records to return via querystring or form field (as well as some identifier for the query to make sure you're getting the right result set).
*As mrjoltcola points out in the comments, to cache or not to cache is a case by case issue, for larger result sets it may make more sense to make more db calls with smaller result sets. An alternate solution to the big-result-set problem is capping their result-set size and displaying a message advising them to make their query more specific if the threshold is exceeded. I would advise going with your best judgement initially and optimizing if needed.