ColumnHideShow

by Robodude

HTML

<table class="teamDataTable table table-condensed">
    <thead>
        <tr>
            <th class="teamName" style="">Teams</th>
            <th class="implementationDate date" style="">Implementation Date</th>
            <th class="featureCompleteDate date" style="">Feature Complete Date</th>
            <th class="testEnvAvailableDate date" style="">Test Env. Available?</th>
            <th colspan="4" class="red devTasksTD" style="">Dev Tasks</th>
            <th class="qaTasksTD blue" style="">QA Tasks</th>
            <th class="bugsTD yellow" style="">Bugs</th>
        </tr>
    </thead>
    <tbody>
            <tr data-teamfeatureid="1">
                <td style="">Combat</td>
                <td data-datetype="implementation" class="implementationDate date" style="">10/01/2012</td>
                <td data-datetype="featurecomplete" class="featureCompleteDate date" style="">Click to edit</td>
                <td data-datetype="testenvavailable" class="testEnvAvailableDate date" style="">06/16/2012</td>
                <td class="red">1</td>
                <td class="red">2</td>
                <td class="red">3</td>
                <td class="red">4</td>
                <td class="blue">NYI</td>
                <td class="yellow">NYI</td>
            </tr>
    </tbody>
</table>
<div id="info"></div>

CSS

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}
.yellow{
    background-color:yellow;
}

td, th
{
    border: 1px solid black;
}

JavaScript

(function ($) {
    $.fn.ColumnHideShow = function (options) {
        var table = this;

        var settings = $.extend({
            'name': 'View',
            'disableColumns': [],
            'hideColumns': [],
            'useCookie': true
        }, options);

        var tableName = this.selector;


        var cookieList = "";
        if (settings.useCookie == true) {
            cookieList = jQuery.parseJSON($.cookie(tableName));
            console.log(cookieList);
        }
        //console.log(cookieList);

        var list = [];
        if (cookieList != "" && cookieList != null) {
            //console.log("entering cookie if");
            list = cookieList;
        }
        else {
            //console.log("no cookie!");
            list = listOfCheckedItems();
        }

        var tableIsInitialized = table.first().prev("div.viewColumnsWrapper").length > 0;
        if (!tableIsInitialized) {
            table.first().before("<div class='viewColumnsWrapper'><button class='btn btn-small btnViewColumns'>"
            + settings.name + "<i class='icon-chevron-down'></i></button><div class='columnContent' style='display:none;'></div></div>");
        }

        var btnToggle = table.first().prev().children(".btnViewColumns");

        //console.log(list);

        for (var i = 0; i < list.length; i++) {
            if (!tableIsInitialized) {
                //console.log("it's not initialised!");
                if (list[i].Checked == true) {
                    btnToggle.next(".columnContent").append("<div><label><input type='checkbox' checked='checked' /><span>" + list[i].Name + "</span></label></div>");
                }
                else {
                    btnToggle.next(".columnContent").append("<div><label><input type='checkbox' /><span>" + list[i].Name + "</span></label></div>");
                }

                if (settings.disableColumns != "") {
                    for (var j = 0; j < settings.disableColumns.length; j++) {
    ...