Dynamic Table Display with CSS, Javascript, and jQuery

I have a very large and long table I'm working with that is in an outline format. The table, could be any table you want to break into parts, this one just happens to be an outline of projects, goals, and subgoals.

The users sometime want to see the projects and not the goals or subgoals; other times, they want to see projects and goals, and not the subgoals; and other times when searching for something they may want to see the entire table.

We could go back to the server each time the user picks a new way to view the table, but for a very long table, this means a slow browser load every time the user selects a new view. The approach I took, in this particular case, was to get the table once from the database, and then turn different views of the table on and off using CSS, JavaScript, and jQuery. This way the entire table loads once, and is always present in the browser, but not always completely visible, depending on what view the user selects and wants to see. The result is an extremely fast loading view, whenever a new view is selected.

Since we are doing everything in the browser, after the initial data load from the database, the dynamics will have to be handled with JavaScript, instead of PHP, or another server language. There turned out to be two distinct problems that I encountered when setting this up: how to only show the part of the table you want to see, and the one that prompted this article, how to change the menu button to show which view is selected by changing CSS colors of the button. Let's tackle them one at a time.

++++++++++++++++++++++++++++++++++++++++++++++++++++

As a first step, we need to tag the table rows depending on the type of data in the row. This simply puts a class tag on each row depending on the type of data you want to see in a view. In this case, it would look something like this:

No biggee, going down the table, you may have more that one goal per project and multiple subgoals per goal, each row gets a class tag. By tagging each type of row with a class, you can now use that class to give a different color to each row in CSS, in addition to selecting it for a particular view.

We have our data tagged, let's get to the JavaScript. Next we want to initiate an event based on the user selecting a different view by clicking on a button. We'll need a menu with three buttons, and we'll use the JavaScript "onclick" event to initiate the changing of the views. Let's take a look at the menu in your html page:

With each button we have an "onclick" mouse event that will trigger the view switch.

Now to the JavaScript code in the head of the html page. We'll have to write a JavaScript function for each "onclick" event. Since we will always show projects, all we need to be concerned about is the visibility of the goal and subgoal table rows. We will be using jQuery so we want to include JQuery at the top of the JavaScript.



/* THE START OF THE CUSTOM JAVASCCRIPT */

In the ProjGoalandSub() function you'll notice I shut everything off, and then turned it back on. You may, or may not, have to do this.

If you want to reload the page. I included the call for this, even though I didn't use it in the actual code. jQuery allows us to hide the visibility of a row through the CSS "display: none" property.

One more thing your user may ask you to do is set a default view when you first load the page. To do this we'll use an "onload" event that is put inside the html body tag, like so:

onload="ProjandGoal()"

Every time the table loads, we'll see the Projects and Goals view. That's about it for the first part of the problem.

++++++++++++++++++++++++++++++++++++++++++++++++++

The second part of the problem was aesthetic, and a real challenge. How to make the buttons "depressed," by reversing the background and foreground colors, depending on which button is selected. I tried several things to make this happen, many unsuccessful, before coming up with this solution.

Basically, what we want to do is to identify each button uniquely and then put a "selected" tag on the selected button. We then can style the button with CSS to show it has been selected.

My first thought was to put a unique "id" name on each button. That will work part of the way. In jQuery, we can switch an id tag from one value to another like so.

    	
$(document).ready(function(){
	$('#proj').attr('id','selbutton');
});

This will get the unique id "proj" and change it to "selbutton". "proj" as an id will no longer exist. This is fine until you try to reset the "selbutton" id back to "proj." It will not work, and we do need to turn the "selbutton" id off when another button is selected. The only way to switch the ID back again is to reload the page, which unfortunately resets everything to where you started, and makes you have to continually reload the page. Not what we want. And we don't want to use PHP, since our goal was not to return to the server.

We have one of two choices, we can use jQuery to style the CSS like so:

    
$(document).ready(function(){
    $('#proj').css({'background-color': 'tan' , 'color':'orange'});
});

This has the drawback of putting CSS styles in your JavaScript instead of in your CSS file, where it belongs.

The path, I ultimately used was to use classes. In jQuery you can't toggle ID's back and forth dynamically, but you can with classes.

Let's spruce up our code. First, let's give each button a unique identifier class, and also, a common button class to identify it as one of a group of buttons.

We style all the buttons, and make them look the same, by styling the ".projectTableMenu" class in CSS, and while we're there, you want to set the style of the depressed button, using the ".selbutton" class.

Now to toggle our classes to add the "selbutton" class when the button is depressed. We'll use jQuery for this.

Let's add a jQuery function to reset all our buttons to the same non-selected look, like so:

function removeActiveClass()
{
	$(document).ready(function(){
	$('.proj1').removeClass('selbutton');
	$('.goal2').removeClass('selbutton');
	$('.sub3').removeClass('selbutton');
    });
}

Now all that's left is to modify our three original functions to reset all the buttons on first entering the function with the "removeActiveClass()" function, and then, since we will only enter the function that we clicked on with our "onclick" event, we will add a the "selbutton" class to that button with jQuery. Here's our modifications to the first three functions:

/* view project only */
function ProjectOnly()"
{
removeActiveClass();
      hideGoal();
      hideSubgoal();

/*  Here's our toggle */
$(document).ready(function(){
$('.proj1').addClass('selbutton');
});
}

/* view projects and goals */
function ProjandGoal()"
{
   removeActiveClass();
	showGoal();
	hideSubgoal();

   /*  Here's our toggle */
    $(document).ready(function(){
	$('.goal2').addClass('selbutton');
	});

}

/* view projects, goals, and subgoals */
function ProjGoalandSub()"
{
    removeActiveClass();
	hideGoal();
	hideSubgoal();
	showGoal();
	showSubgoal();

    /*  Here's our toggle */
    $(document).ready(function(){
	$('.sub3').addClass('selbutton');
	});
}

If you load the screen in Firefox, bring up Firebug, and focus on the project button, for example, you'll see the classes toggle between class="proj1" and class="proj1 selbutton" as you click back and forth between the project button and the other buttons.

That's it. This got a little long, but I wanted to walk you through the complete solution. I welcome any comments or alternate approaches you may use. Enjoy.

Comments are closed.