Dynamic DataTable

Dynamically loaded DataTable with some CSS to make it look pretty.

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<div id="controls">
    <fieldset>
        <legend>Time Period - Month</legend>
        <input id="timePeriodCurrent" name="timePeriod" type="radio" value="201310" checked />
        <label for="timePeriodCurrent">Current</label>
        <input id="timePeriodPrior" name="timePeriod" type="radio" value="201309" />
        <label for="timePeriodPrior">Prior</label>
    </fieldset>
</div>
<div id="grid"></div>

<!-- 

I'm leaving off the blank extra column in the screenshot. Not sure what that was about but I don't think it's necessary. 

-->

CSS

/* note that normalize.css has been loaded as an external resource */

@import url(http://fonts.googleapis.com/css?family=PT%20Sans%20Caption); /* I realize this prevents parallel downloads, but this is JSFiddle, after all. */

/* general */
body { padding: 20px; }

/* controls */
#controls fieldset { /* I dislike the use of ID's here and throughout. What if you want more than one table on a page? However for the sake of this example I will go with it. */
    float: left;
    padding: 4px;
    font-size: 1em;
    margin-bottom: 5px;
    border-radius: 6px;
    border: 1px solid #aaa;
}
#controls input,
#controls label {
    cursor: pointer;
}
#controls legend {
    color: #067ab4;
    font-size: .95em;
    margin: 0 0 0 3px;
}

/* empty container */
#grid{
    clear: both;
    display: block;
}

/* generated table */
#dataTable {
    font-family: "PT Sans Caption";
    border-bottom: solid 1px rgb(194,194,194);
}
#dataTable caption {
    color: #fff;
    font-size: .8rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 5px 5px 0 0;
    border: solid 1px rgb(0,100,130);
    background-color: rgb(0,137,184);
    background: linear-gradient(to bottom, rgb(0,108,131) 0%,rgb(0,140,190) 100%);
}
#dataTable tr:nth-child(even){
    background-color: #eee;
}
#dataTable th, #dataTable td {
    padding:  5px;
    text-align: center;
    border-left: solid 1px rgb(194,194,194);
}
#dataTable th:last-child, #dataTable td:last-child {
    border-right: solid 1px rgb(194,194,194);
}
#dataTable th {
    cursor: pointer;
    font-size: .8em;
    padding: .8em .5em;
    color: rgb(50,50,50);
    background: rgb(229,229,229);
    text-shadow: 1px 1px 1px #fff;
    border-bottom: solid 1px rgb(194,194,194);
    background: linear-gradient(to bottom, rgb(250,250,250) 0%,rgb(200,200,200) 100%);
}
#dataTable td {
    text-align: right;
}
#dataTable td.kpi {
    text-align: left;
}
#dataTable tr:nth-child(even) .attain-high,
#dataTable tr:nth-child(even)...

JavaScript

init = function() {
    // Do any initializations.

    // Get the data.
    requestData();
};

drawGrid = function(data) {
    $('#grid').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable"><caption>My Sales for Current Month</caption></table>' );
    $('#dataTable').dataTable({
        "paging"    : false,
        "autoWidth" : false,
        "info"      : false,
        "searching" : false,
        "data"      : data.data,
        "columns"   : formatHeaders(data.headers),
        "columnDefs": [ {
                "targets": 0,
                "className": "kpi"
            },{
                "targets": 1,
                "visible": false
            }, {
                "targets": [10,11,12,13],
                "visible": false
            }, {
                "targets": [9,13],
                "createdCell": function (td, cellData, rowData, row, col) {
                    var percent = parseFloat(cellData);
                    var $td = $(td);
                    if (percent > 100) {
                        $td.addClass("attain-high");
                    } else if (percent < 95) {
                        $td.addClass("attain-low");
                    } else {
                        $td.addClass("attain-med");
                    }
                }
            }
        ],
        
    });

    // events handlers
    var salesTable     = $('#dataTable').dataTable().api();
    var columnsCurrent = salesTable.columns( [6,7,8,9]     );
    var columnsPrior   = salesTable.columns( [10,11,12,13] );
    $('#controls').on( 'click', "#timePeriodCurrent", function (e) {
        columnsCurrent.visible( true );
        columnsPrior.visible( false );
    } ).on( 'click', "#timePeriodPrior", function (e) {
        columnsCurrent.visible( false );
        columnsPrior.visible( true );
    } );
};

formatHeaders = function(headers) {
    for(var i=0,len=headers.length,formattedHeaders=[]; i<len; i++){
        formattedHeaders.push({...