MVC Tables

 

Update 12-Sep-2013: https://mtranter.com/2013/09/11/mvc-tables/

As part of an MVC portal/admin app we’ve been working on recently, we required HTML Table rendering functionality that supported AJAXy paging/sorting/filtering etc.

We initially tried using the awesome MVC classes for jquery DataTables, but this didn’t quite fit our needs. We didn’t need a lot of in-line editing, but what we did need was the ability to render cells from display/editor templates and partial views etc.

What we came up with was a fluently configurable table framework that used all that MVC goodness to easily generate highly customisable tables. These tables are sortable, pagable and filterable all on the server side via AJAX.

Unlike other table frameworks, MvcTable sends HTML from the server rather than Json/Xml. This enabled us to be far more flexible with the column/cell markup than just using <td>{jsonObj.Value}</td>. This does sacrifice some performance given the overhead of all that markup, but I suspect if you’re showing so much data that the performance becomes noticable, you’re probably showing too much data to the user..

The JavaScript is written as a jQuery plugin and as such has a dependency on jQuery. Plugin methods allow the table to be serialized (to form name.value pairs), refreshed, validated (if using jQuery validation), saved back to the server (given data has been rendered in input controls) etc

I have polished up the code and have thrown it up on GitHub here

I will put up some demos and more documentation in the near future…

Advertisements

One thought on “MVC Tables

  1. Pingback: Introducing – MVC Tables | markt.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s