<p></p>    <pre><% Html.Grid(Model).Columns( column => {   <br>   column.For(x => Html.ActionLink("ID", "Details", new { id = x.Id })).Named("View").DoNotEncode();   <br>   column.For(x => x.Name).Named("Pet Name");   <br>   column.For(x => x.Description).Named("Description");   <br>   column.For(x => x.Price).Format("{0:C}"); <br>})<br>.Attributes(style => "width: 75%;")<br>.Empty("There are no pets.")<br>.Render(); %><br></pre>   <p>As you can see in the code above, the syntax is easy to ready and it utilizes the tightly bound model passed to the View. The output of the Grid isn’t anything spectacular (see the following grid).</p> <pre><br>  <table id="dataTable"><br>        <thead><br>            <tr><br>                <th>View</th><br>                <th>Pet Name</th><br>                <th>Description</th><br>                <th>Price</th><br>            </tr><br>        </thead><br>        <tr class="gridrow"><br>            <td><a href="/MvcContrib/Details/1">ID</a></td><br>            <td>Ralph Fits</td><br>            <td>A lonely ragged pup that licks himself and isn't house trained</td><br>            <td>$12.99</td><br>        </tr><br>        <tr class="gridrow_alternate"><br>            <td><a href="/MvcContrib/Details/2">ID</a></td><br>            <td>Fluffy Florentine</td><br>            <td>A sweet little kitten that is ready to have a home</td><br>            <td>$277.00</td><br>        </tr><br>        <!-- Additional Rows --><br>        <tr class="gridrow_alternate"><br>            <td><a href="/MvcContrib/Details/14">ID</a></td><br>            <td>Alien Abbott</td><br>            <td>You never hear this dog bark because it only barks in the future.</td><br>            <td>$777.99</td><br>        </tr><br>        <tr class="gridrow"><br>            <td><a href="/MvcContrib/Details/15">ID</a></td><br>            <td>Crazy Calico</td><br>            <td>If you like cats, don't get this one because it's pure crazy on a stick!</td><br>            <td>$2.99</td><br>        </tr><br>    </tab<br></pre> <p>We can now transform the output of the MVC Contrib Grid into a rich featured table with the help of a little jQuery.</p> <h4>jQuery TableSorter Plugin</h4> <p>First, lets use the jQuery <a href="http://tablesorter.com/docs/">TableSorter Plugin</a> to add some simple inline sorting capabilities to the Grid. Only the following one line of jQuery is necessary to transform this Grid. See the follow table for the results.</p> <p>Note: TableSorter has additional widgets you can add for extra functionality. I am using the zebra widget to provide the alternate row coloring.</p> <pre><br>$("table").addClass('tableSorter').tablesorter({ sortList: [[1, 0]], widgets: ['zebra'] });  <br></pre> <p></p><table><thead><tr><th>View</th><th>Pet Name</th><th>Description</th><th>Price</th></tr></thead><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/1">ID</a></td><td>Ralph Fits</td><td>A lonely ragged pup that licks himself and isn't house trained</td><td>$12.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/2">ID</a></td><td>Fluffy Florentine</td><td>A sweet little kitten that is ready to have a home</td><td>$277.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/3">ID</a></td><td>Bubba Gump</td><td>A very stupid dog that can't even find his way to his dog house</td><td>$999.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/4">ID</a></td><td>Charlie Strango</td><td>This weird looking puppy scares most adults, but has a strange interest to children</td><td>$23.44</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/5">ID</a></td><td>Blacky the Beautiful</td><td>This beautiful cat is as kind as can be. Who says that a dog is man's best friend?</td><td>$45.65</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/6">ID</a></td><td>Snot Nose Nelly</td><td>If you want to get wet, then this is the pet for you. Talk about snot everywhere!</td><td>$44.78</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/7">ID</a></td><td>Darcy Scoop</td><td>A wonderful black lab with human-like intelligence; however, it does poop a lot.</td><td>$234.55</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/8">ID</a></td><td>Supsrirooantsum</td><td>A very rare cat straight from it's homeland of India.</td><td>$432.67</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/9">ID</a></td><td>Clark Kent</td><td>A self-employed kitten making and selling fur balls for all to enjoy.</td><td>$44.66</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/10">ID</a></td><td>Red Headed Bull</td><td>This dog is unlike any other that you have seen. You can even braid it's flowing red hair.</td><td>$78.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/11">ID</a></td><td>Rex the Terrible</td><td>A half german shepard / half wolf aggresive dog that will tear the flesh out of anyone you wish.</td><td>$346.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/12">ID</a></td><td>Skittish Steve</td><td>You will never see this dog once you buy it. It'll be like you never had a pet to begin with.</td><td>$33.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/13">ID</a></td><td>Dart Mouth</td><td>A dart gun was surgically grafted into this dog's mouth. He is great for parties.</td><td>$55.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/14">ID</a></td><td>Alien Abbott</td><td>You never hear this dog bark because it only barks in the future.</td><td>$777.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/15">ID</a></td><td>Crazy Calico</td><td>If you like cats, don't get this one because it's pure crazy on a stick!</td><td>$2.99</td></tr></table><h4>jQuery DataTable Plugin</h4> <p>Now, lets try adding a s lightly more feature rich jQuery Plugin to our Grid. The jQuery <a href="http://www.datatables.net/">DataTable Plugin</a> allows not only sorting of columns, but provides an elegant searching mechanism and also paging functionality. Yet again, with only one jQuery statement we can transform this table into something much more usable.</p> <pre><br>$('dataTable').addClass('dataTable').dataTable({<br>   "iDisplayLength": 10,<br>   "aaSorting": [[1, "asc"]],<br>   "aoColumns": [{ "bSortable": false }, null, null, null]<br>}); <br></pre> <hr><p></p><table><thead><tr><th>View</th><th>Pet Name</th><th>Description</th><th>Price</th></tr></thead><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/1">ID</a></td><td>Ralph Fits</td><td>A lonely ragged pup that licks himself and isn't house trained</td><td>$12.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/2">ID</a></td><td>Fluffy Florentine</td><td>A sweet little kitten that is ready to have a home</td><td>$277.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/3">ID</a></td><td>Bubba Gump</td><td>A very stupid dog that can't even find his way to his dog house</td><td>$999.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/4">ID</a></td><td>Charlie Strango</td><td>This weird looking puppy scares most adults, but has a strange interest to children</td><td>$23.44</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/5">ID</a></td><td>Blacky the Beautiful</td><td>This beautiful cat is as kind as can be. Who says that a dog is man's best friend?</td><td>$45.65</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/6">ID</a></td><td>Snot Nose Nelly</td><td>If you want to get wet, then this is the pet for you. Talk about snot everywhere!</td><td>$44.78</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/7">ID</a></td><td>Darcy Scoop</td><td>A wonderful black lab with human-like intelligence; however, it does poop a lot.</td><td>$234.55</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/8">ID</a></td><td>Supsrirooantsum</td><td>A very rare cat straight from it's homeland of India.</td><td>$432.67</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/9">ID</a></td><td>Clark Kent</td><td>A self-employed kitten making and selling fur balls for all to enjoy.</td><td>$44.66</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/10">ID</a></td><td>Red Headed Bull</td><td>This dog is unlike any other that you have seen. You can even braid it's flowing red hair.</td><td>$78.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/11">ID</a></td><td>Rex the Terrible</td><td>A half german shepard / half wolf aggresive dog that will tear the flesh out of anyone you wish.</td><td>$346.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/12">ID</a></td><td>Skittish Steve</td><td>You will never see this dog once you buy it. It'll be like you never had a pet to begin with.</td><td>$33.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/13">ID</a></td><td>Dart Mouth</td><td>A dart gun was surgically grafted into this dog's mouth. He is great for parties.</td><td>$55.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/14">ID</a></td><td>Alien Abbott</td><td>You never hear this dog bark because it only barks in the future.</td><td>$777.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/15">ID</a></td><td>Crazy Calico</td><td>If you like cats, don't get this one because it's pure crazy on a stick!</td><td>$2.99</td></tr></table><br><hr><p>Now, there are definitely some pros and cons in using the above two jQuery plugins.</p> <p>Pros</p><ul><li>The <a href="http://tablesorter.com/docs/">TableSorter Plugin</a> & <a href="http://www.datatables.net/">DataTable Plugin</a> are very easy to implement. Only one jQuery statement is needed. </li>   <li>The user is presented with a richer interface providing sorting, paging, and simple searching. </li></ul><p>Cons</p><ul><li>Despite the pros listed above, the biggest con is that the jQuery Plugins are not scalable. All the records are returned in the View and the plugins hide and show the necessary data depending upon the user’s actions. </li></ul><p>In light of the cons, I personally wouldn’t use any of the above jQuery plugins for my tables unless it was for a trivial non-production web page with a known number of static records.</p> <p>Normally, I lead towards using either the <a href="http://www.flexigrid.info/">Flexigrid Plugin</a> or <a href="http://www.trirand.com/blog/">jqGrid Plugin</a> that I will be reviewing in the next blog post in this series.</p>