PEAR HTML_Table: Displaying Tabular Data in PHP - Page 2

by: W. Jason Gilmore

June 1, 2011

Adding Interactive Row Highlighting

Alright, this is really starting to shape up nicely! I'd like to add one last feature, a bit of interactivity which will bring specific attention to each row as the user mouses over. Believe it or not this is most easily accomplished using CSS' hover selector. Add the following to your CSS definitions:

#games tr:hover {
  background-color: #A4E666;
}

The hover selector works in conjunction with all modern browsers. You'll also want to comment out or remove the altRowAttributes() method call. With the CSS in place, any row mouseovers will cause the row to turn green, as demonstrated in Figure 5.

Figure 5. Adding a Bit of Interactivity

Sorting Rows Interactively

While you can make an educated guess regarding how the user would like to sort the table, it's always ideal to give the user the power to override this default. Add interactive sorting using the Tablesorter jQuery plugin. Once configured, the user can click on any table header to resort the contents. Of course, to integrate this feature you'll need to reference both jQuery and the Tablesorter plugin in your document. Additionally, you'll need to reformat the table a bit to use both the THEAD and TBODY tags. I've provided all of the code used to integrate this interactive feature in the following listing, highlighting key lines:

<html>
 <head>

<script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.5");
</script>

<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
 
<script type="text/javascript">
  google.setOnLoadCallback(function() {
    $("#games").tablesorter(); 
  });
</script>

</head>
<body>

<?php

require_once "HTML/Table.php";

$games = array(
 array("Call of Duty: Modern Warfare 2", "Activision Inc.", "$59.99"),
 array("Super Mario Galaxy 2", "Nintendo", "$49.99"),
 array("Grand Theft Auto IV", "Rockstar Games", "$19.99"),
 array("NBA 2K11", "2K Sports", "$39.99")
);

$table = new HTML_Table(array("id" => "games", 
          "class" => "tablesorter"), 0, TRUE);

$head =& $table->getHeader();
$head->setHeaderContents(0, 0, 'Title');
$head->setHeaderContents(0, 1, 'Publisher');
$head->setHeaderContents(0, 2, 'Price');

$body =& $table->getBody();
for ($rows = 0; $rows < count($games); $rows++)
{
  for($cols = 0; $cols < count($games[0]); $cols++)
  {
    $body->setCellContents($rows, $cols, $games[$rows][$cols]);
  }

}

echo $table->toHtml();

?>
</body>
</html>

Conclusion

Using powerful tools such as HTML_Table, CSS and jQuery, it really is incredible what's possible with just a few lines of code. What tools do you use to format your tables? Tell us about them in the comments!

About the Author

Jason Gilmore is founder of the publishing, training, and consulting firm WJGilmore.com. He is the author of several popular books "Easy PHP Websites with the Zend Framework", "Easy PayPal with PHP", and "Beginning PHP and MySQL, Fourth Edition". Follow him on Twitter at @wjgilmore.

« Previous Page

Comment and Contribute

0 Comments (click to add your comment)

Your comment has been submitted and is pending approval.

Author:

W. Jason Gilmore

Comment:

Name/nickname:
Email:

Comment:

(Maximum characters: 1200). You have characters left.