OWASP O2 Platform Blog

Creating a jQuery DataTable using serialized JSON object

Using the same technique used in the JsTree example, here is a DataTable dynamically populated from a serialized JSON object

//based on example from http://www.datatables.net/release-datatables/examples/data_sources/js_array.html
//var topPanel = panel.clear().add_Panel(); 
var topPanel = "Poc - jQuery jsDataTable".popupWindow(900,400);

var jsDataTable =  new JsDataTable();

jsDataTable    .add_Row("Trident", "Internet Explorer 4.0", "Win 95+", 4, "X")
               .add_Row("Trident", "Internet Explorer 4.0", "Win 95+", 4, "X")
            .add_Row("Trident", "Internet Explorer 5.0", "Win 95+", 5, "C")
            .add_Row("Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A")
            .add_Row("Trident", "Internet Explorer 6.0", "Win 98+", 6, "A")
            .add_Row("Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A")
            .add_Row("Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A")
            .add_Row("Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A")
            .add_Row("Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A")
            .add_Row("Webkit", "Safari 1.2", "OSX.3", 125.5, "A")
            .add_Row("Webkit", "Safari 1.3", "OSX.3", 312.8, "A")
            .add_Row("Webkit", "Safari 2.0", "OSX.4+", 419.3, "A")
            .add_Row("Webkit", "Safari 3.0", "OSX.4+", 522.1, "A");

jsDataTable.add_Columns("Engine", "Browser", "Platform");
jsDataTable.add_Column("Version", "center");
jsDataTable.add_Column("Grade", "center");
//adding without using extension methods
/*jsDataTable.aaData.Add(new List<string> { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Engine"  });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Browser"  });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Platform"  });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Version" , sClass = "center" });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Grade" , sClass = "center" }); */

//return "{0}".info(jsDataTable.jsonString());

 
var ie = topPanel.add_IE();                 

ie.showMessage("loading dataTable js and css");

var jQuery = new IE_JQuery(ie);    
var cssFile = @"dataTable_demo.css".local();
var styleHtml =  "<style type=\"text/css\"> {0} </style>".format(cssFile.fileContents().fixCRLF().remove("".line()).replace("'", "\""));

var injectCSS = "$('body').append($('"  + styleHtml + "' ))";
ie.invokeEval(injectCSS);

//ie.invokeEval("<a href="http://static.jstree.com/v.1.0pre/jquery.jstree.js%22.uri().getHtml">http://static.jstree.com/v.1.0pre/jquery.jstree.js".uri().getHtml</a>());  // use to get jstree from jstree.com website
ie.invokeEval("jquery.dataTables.min.js".local().fileContents());
jQuery.element("div").html("creating local table");

ie.invokeEval("$('body').append($('<div id=\"testDataTable\"/>')); $('#testDataTable').html('test DataTable will go here');");
ie.invokeEval("$('#testDataTable').html( '<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"display\" id=\"example\"></table>' );");
//ie.invokeEval("%('#example').html('aaaaaaaaa')");
/*var dataToBuildTable =  "                        { " +    
                        "                                'aaData': [" +
                        "                                                [ 'Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X' ], " +
                        "                                                [ 'Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C' ], " +
                        "                                                [ 'Gecko', 'Firefox 3', 'Win 2k+ / OSX.3+', 1.9, 'A' ], " +
                        "                                                [ 'Webkit', 'Safari 1.2', 'OSX.3', 125.5, 'A' ]          " +
   
                        "                                          ]," +         
                        "                                'aoColumns': [" +
                        "                                                { 'sTitle': 'Engine' }, " +
                        "                                                { 'sTitle': 'Browser' }, " +
                        "                                                { 'sTitle': 'Platform' }, " +
                        "                                                { 'sTitle': 'Version', 'sClass': 'center' }, " +
                        "                                                { 'sTitle': 'Grade', 'sClass': 'center' } " +
                        "                                               ]" +
                        "                        }      ";     */
                
var dataToBuildTable = jsDataTable.jsonString();
ie.invokeEval(" $('#example').dataTable( " + dataToBuildTable +" );"  );

//O2File:JsDataTable.cs

return "done";

//O2File:IE_JQuery.cs
//O2Ref:WatiN.Core.1x.dll
//O2Ref:Microsoft.mshtml.dll

Here is the code of the JsDataTable class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Windows.Forms;
using O2.Kernel.ExtensionMethods;
using O2.DotNetWrappers.ExtensionMethods;

//O2Ref:System.Web.Extensions.dll

namespace O2.XRules.Database.APIs
{
    public class JsDataTable
    {
        public List<List<object>> aaData;
        public List<JsDataColumn> aoColumns;       
       
        public JsDataTable()
        {
             aaData = new List<List<object>>() ;
             aoColumns = new List<JsDataColumn>();
        }
       
        public class JsDataColumn
        {
            public string sTitle {get; set; }
            public string sClass {get; set; }
        }
    }
   
   
    public static class JsDataTable_ExtensionMethods
    {
        public static string jsonString(this object _object)
        {
            return new JavaScriptSerializer().Serialize(_object);
        }
       
        public static JsDataTable add_Row(this JsDataTable jsDataTable, params object[] cells)
        {
            return jsDataTable.add_Row(cells.toList());
        }
       
        public static JsDataTable add_Row(this JsDataTable jsDataTable, List<object> cells)
        {
            jsDataTable.aaData.Add(cells);
            return jsDataTable;
        }
               
        public static JsDataTable add_Column(this JsDataTable jsDataTable, string title)
        {
            return jsDataTable.add_Column(title, null);
        }
       
        public static JsDataTable add_Column(this JsDataTable jsDataTable, string title, string _class)
        {
            jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = title, sClass = _class });
            return jsDataTable;
        }
       
        public static JsDataTable add_Columns(this JsDataTable jsDataTable, params string[] titles)
        {
            foreach(var title in titles)
                jsDataTable.add_Column(title);
            return jsDataTable;
        }
    }
}

June 21, 2011 - Posted by | IE Automation, jQuery, WatiN

No comments yet.

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

%d bloggers like this: