{"id":1245,"date":"2018-01-19T19:22:36","date_gmt":"2018-01-19T19:22:36","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/pear-html_table-displaying-tabular-data-in-php-page-2\/"},"modified":"2018-01-19T19:24:38","modified_gmt":"2018-01-19T19:24:38","slug":"pear-html_table-displaying-tabular-data-in-php-page-2","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/pear-html_table-displaying-tabular-data-in-php-page-2\/","title":{"rendered":"PEAR HTML_Table: Displaying Tabular Data in PHP Page 2"},"content":{"rendered":"
\n
\n
By W. Jason Gilmore<\/div>\n
on June 1, 2011<\/div>\n<\/p><\/div>\n
\n

Adding Interactive Row Highlighting<\/h2>\n
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<\/code> selector. Add the following to your CSS definitions:<\/div>\n
<\/p>\n
#games tr:hover {\n  background-color: #A4E666;\n}<\/pre>\n
<\/code><\/div>\n
The hover<\/code> selector works in conjunction with all modern browsers. You’ll also want to comment out or remove the altRowAttributes()<\/code> method call. With the CSS in place, any row mouseovers will cause the row to turn green, as demonstrated in Figure 5.<\/div>\n
\"\"
Figure 5.<\/strong><\/a> Adding a Bit of Interactivity<\/div>\n
Sorting Rows Interactively<\/h2>\n
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<\/a> 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<\/code> and TBODY<\/code> tags. I’ve provided all of the code used to integrate this interactive feature in the following listing, highlighting key lines:<\/div>\n
<\/p>\n
<html>\n <head>\n\n<script type=\"text\/javascript\" \n        src=\"http:\/\/www.google.com\/jsapi\"><\/script>\n<script type=\"text\/javascript\">\n  google.load(\"jquery\", \"1.5\");\n<\/script>\n\n<script type=\"text\/javascript\" src=\"jquery.tablesorter.min.js\"><\/script><\/strong>\n \n<script type=\"text\/javascript\">\n  google.setOnLoadCallback(function() {\n    $(\"#games\").tablesorter(); <\/strong>\n  });\n<\/script>\n\n<\/head>\n<body>\n\n<?php\n\nrequire_once \"HTML\/Table.php\";\n\n$games = array(\n array(\"Call of Duty: Modern Warfare 2\", \"Activision Inc.\", \"$59.99\"),\n array(\"Super Mario Galaxy 2\", \"Nintendo\", \"$49.99\"),\n array(\"Grand Theft Auto IV\", \"Rockstar Games\", \"$19.99\"),\n array(\"NBA 2K11\", \"2K Sports\", \"$39.99\")\n);\n\n$table = new HTML_Table(array(\"id\" => \"games\", \n          \"class\" => \"tablesorter\"), 0, TRUE);<\/strong>\n\n$head =& $table->getHeader();<\/strong>\n$head->setHeaderContents(0, 0, 'Title');\n$head->setHeaderContents(0, 1, 'Publisher');\n$head->setHeaderContents(0, 2, 'Price');\n\n$body =& $table->getBody();<\/strong>\nfor ($rows = 0; $rows < count($games); $rows++)\n{\n  for($cols = 0; $cols < count($games[0]); $cols++)\n  {\n    $body->setCellContents($rows, $cols, $games[$rows][$cols]);\n  }\n\n}\n\necho $table->toHtml();\n\n?>\n<\/body>\n<\/html><\/pre>\n
<\/code><\/div>\n
Conclusion<\/h2>\n
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!<\/div>\n
About the Author<\/h2>\n
Jason Gilmore is founder of the publishing, training, and consulting firm WJGilmore.com<\/a>. He is the author of several popular books “Easy PHP Websites with the Zend Framework”<\/a>, “Easy PayPal with PHP”<\/a>, and “Beginning PHP and MySQL, Fourth Edition”<\/a>. Follow him on Twitter at @wjgilmore<\/a>.<\/div>\n<\/div>\n
<\/p>\n
\n
\u00ab Previous Page<\/a><\/div>\n
1<\/a> <\/div>\n
| <\/div>\n
2<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
HTML_Table is a great PEAR package that makes tabular data presentation a breeze. Learn how to integrate CSS and jQuery with HTML_Table to create an<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1245","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/comments?post=1245"}],"version-history":[{"count":1,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1245\/revisions"}],"predecessor-version":[{"id":2142,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1245\/revisions\/2142"}],"wp:attachment":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/media?parent=1245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/categories?post=1245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/tags?post=1245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}