Showing and hiding table columns with jQuery
So I just finished an interface showing a search result which is paginated and sortable by column but the pagination and sorting is another story. Here we focus on the fact that each column’s visibility could also be toggled on and off.
In order to make that work each column has a class attribute set to for instance field-firstname, or field-telephone. That way it will be trivial to select them with jQuery.
The trickiest part is actually to make this work across browser loads (remember the original has pagination and sorting), we need to make the visibility settings stick, and we do that by way of jQuery Cookie.
Demo here.
function removeTdBlocks(els){
els.removeAttr('style');
}
function getShown(){
if(!$.cookie('show-fields'))
$.cookie('show-fields', 'firstname,lastname');
return $.cookie('show-fields').split(',');
}
function setShown(arr){
$.cookie('show-fields', arr.join(','));
}
function hideShowField(field, action){
var arr = getShown();
var loc = arr.indexOf(field);
if(action == 'hide'){
if (loc != -1)
arr.splice(loc, 1);
}else{
if(loc == -1)
arr.push(field);
}
setShown(arr);
}
$(document).ready(function(){
$("#td-controls").hide();
$("#toggle-controls").toggle(
function(){ $("#td-controls").show(500); },
function(){ $("#td-controls").hide(500); }
);
var show = getShown();
$(".stats_table").find("td").each(function(i){
var cur_td = $(this);
var to_show = false;
$.each(show, function(index, value) {
if(cur_td.attr("class") == 'field-'+value)
to_show = true;
});
if(!to_show)
cur_td.hide();
});
$("#td-controls").find("button").each(function(i){
var field_name = $(this).attr('id').split('-').pop();
$(this).click(function(){
var cur_td = '.field-'+field_name;
if($(cur_td).is(':hidden')) {
$(cur_td).show(500, function(){
removeTdBlocks($(cur_td));
});
hideShowField(field_name, 'show');
}else{
$(cur_td).hide(500);
hideShowField(field_name, 'hide');
}
});
});
});Let’s begin at the top of the document ready part. First we hide the controls responsible for toggling column visibility on and off. Then we initiate toggling the buttons’ visibility on and off.
Next we get the fields that are to be shown, default is firstname and lastname.
We then use those fields to hide the columns that are not represented, in our case it’s the telephone column.
Finally we setup the hide/show control buttons. We get the current field/column name and define the click function. First we do the reverse, ie. build the column class name from the field name and then we check if the current column is hidden. If it is we show it and call removeTdBlocks to remove a block style attribute which the show function “left behind”; in the form of a callback to show that will execute when the show animation has stopped.
Normally the block css would be no biggie but here it would screw up the display of the table columns completely if we let it stay. If the column is already shown we hide it.
Let’s wrap this up with what hideShowField is doing:
1.) First it calls getShown which will return the visible field names as an array.
2.) Then we check where in the array the field is.
3.) If the action argument is “hide” we check if the location is not -1. Minus one would mean it doesn’t exist in the array and then there would be no need to hide because it would mean it was already hidden. Anyway, if it’s there already we use the index and array’s splice function to remove it.
4.) If the action is “show” we similarly check if the field is not in the array (shown) already, if it isn’t we add it. Finally we use setShown to save the shown fields in the JavaScript cookie (we use array’s join method to do so since we can only save strings in the cookie).
Related Posts
Tags: Javascript, jquery, table