user3471169 user3471169 - 4 months ago 46
Javascript Question

Show/Hide table columns with cookie

I wanted to set a cookie in browser for shown/hidden columns, As setting changed so that table didn't get reset on page refresh.

Fiddle : http://jsfiddle.net/HvA4s/72/

HTML

<a href="edit" id=edit>Show/Hide Columns</a>
<table id=table>
<thead>
<tr>
<th id="name">Name</th>
<th id="street">Street</th>
<th id="number">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy</td>
<td>Nightmare Street</td>
<td>123</td>
</tr>
<tr>
<td>Luis</td>
<td>Lost Street</td>
<td>3456</td>
</tr>
</tbody>
</table>


Jquery

$('#edit').click(function() {
var headers = $('#table th').map(function() {
var th = $(this);
return {
text: th.text(),
shown: th.css('display') != 'none'
};
});

var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
$.each(headers, function() {
h.push('<th><input type=checkbox',
(this.shown ? ' checked ' : ' '),
'/> ',
this.text,
'</th>');
});
h.push('</tr></thead></table></div>');
$('body').append(h.join(''));

$('#done').click(function() {
var showHeaders = $('#tableEditor input').map(function() { return this.checked; });
$.each(showHeaders, function(i, show) {
var cssIndex = i + 1;
var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
if (show)
tags.show();
else
tags.hide();
});

$('#tableEditor').remove();
return false;
});

return false;
});


Let's say I hide column 1, column 2 using the button. But columns get visible again as page refresh. Is there a way we can use cookie to keep the setting as is, until changed manually using the same options.

Answer

You can achieve this using jquery.cookie plugin:

$('#table th').each(function ($index, $elem) {
    var $cookie = $.cookie(this.id.toLowerCase() + ".shown");
    $index = $index + 1;
    $('#table th:nth-child(' + $index + '), #table td:nth-child(' + $index + ')').css('display', (typeof ($cookie) === "undefined" || $cookie === "true") ? "" : "none");
});

$('#edit').click(function () {
    var headers = $('#table th').map(function () {
        var th = $(this);
        var $cookie = $.cookie(th[0].id + ".shown");
        return {
            text: th.text(),
            shown: th.css('display') != "none"
        };
    });

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
    $.each(headers, function () {
        var $shown = this.shown;
        h.push('<th><input type=checkbox', ($shown ? ' checked ' : ' '),
            '/> ',
        this.text,
            '</th>');
    });
    h.push('</tr></thead></table></div>');
    $('body').append(h.join(''));

    $('#done').click(function () {
        var showHeaders = $('#tableEditor input').map(function () {
            return this.checked;
        });
        $.each(showHeaders, function (i, show) {
            var cssIndex = i + 1;
            var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
            var $id = $('#table th:nth-child(' + cssIndex + ')')[0].id;

            if (show) {
                $.cookie($id + ".shown", "true");
                tags.show();
            } else {
                $.cookie($id + ".shown", "false");
                tags.hide();
            }
        });

        $('#tableEditor').remove();
        return false;
    });

    return false;
});

Updated fiddle