3.13.2010

C# renderer for jQuery DataTables

DataTables is an excellent plugin for the jQuery javascript library to extend HTML table with advanced functionality. I like to use it in projects, but (may be it is strange for someone) I don't like lot's of raw JavaScript code in aspx\ascx pages.
Some code I extract from page and write it using Script# - another excellent tool. But some code needs to be on a page for some reasons. In such cases I prefer to use a "renderer" - set of strong typed C# classes that renders needed JavaScript to the page.
One of such renderer I wrote a time ago for DataTables. It is compatible with DataTables v1.5.6-1.6.2 and realizes all possible DataTables' properties, callbacks, options, features, localization, etc... Here is a simple usage example:
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <%
    string tableId = "Demo1_Table";
    string tableVariable = "Demo1_DataTable";
   
    Html.DataTable()
        .Config(new DataTableConfig()
        {
            TableId = tableId,
            TableCss = "display",
            DataTableVariableName = tableVariable,
            CreateNew = false,
            RenderScriptTags = true,
            RenderJQueryReady = true
        })
        .Options(new DataTableOptions()
        {
            PaginationType = PaginationType.full_numbers
        })
       .Render();
    %>
           
    <table id="Demo1_Table" cellpadding="0" cellspacing="0" border="0" class="display">
     <thead> 
      <tr> 
       <th>Rendering engine</th> 
       <th>Browser</th> 
       <th>Platform(s)</th> 
       <th>Engine version</th> 
       <th>CSS grade</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="gradeX"> 
       <td>Trident</td> 
       <td>Internet
         Explorer 4.0</td> 
       <td>Win 95+</td> 
       <td class="center">4</td> 
       <td class="center">X</td> 
      </tr> 
      <tr class="gradeC"> 
       <td>Trident</td> 
       <td>Internet
         Explorer 5.0</td> 
       <td>Win 95+</td> 
       <td class="center">5</td> 
       <td class="center">C</td> 
      </tr>
     </tbody> 
     <tfoot> 
      <tr> 
       <th>Rendering engine</th> 
       <th>Browser</th> 
       <th>Platform(s)</th> 
       <th>Engine version</th> 
       <th>CSS grade</th> 
      </tr> 
     </tfoot>
    </table>
</asp:Content>
As you can see, there are no JavaScript, only strong-typed C# code.

As a bonus, I've implemented simplified mechanism for localizing DataTables, an example how to use it you can found in example project (see download link at the end of the article). Generally speaking, all you need is a ResourceManager instance, ResourceKeyFormat specified with {0} placeholder, and list of resources named correctly. For example if ResourceKeyFormat = "DataTable_{0}", resource for DataTableLocalization.Search that represents actual resource "oLanguage.sSearch" should be named as "DataTable_Search". That's all! Automatic localizing will do all the work itself.

You can download sample project with DataTables renderer here: DataTablesRenderer.zip.


Shout it

kick it on DotNetKicks.com

No comments:

Post a Comment