YUI DataTable doesn't render in IE7

Recently I ran into an issue where we were using a YUI DataTable that worked great in FireFox, Safari and Opera, but when it came to IE 6 & 7 it was a different story.

Our code page was originally rendering the data from a JSON feed. But as I attempted to diagnose, I decided to have PHP render the data into a HTML Table, and change the expected data type to TYPE_HTMLTABLE. Still I continued to have issues, only now in FireFox and Safari, both the HTML table and the YUI DataTable were showing, but IE would only show the HTML table.

After a few more hours of hair pulling and eye straining, I discovered the problem. It turns out that the code page included a header and footer. As it turns out, the header, opened a HTML Table and the footer closed that table. That said, no where in my code page did it open a table row and table cell. So once I wrapped my code in a TR/TD set, low and behold it worked as expected in all of the major browsers.

Below is a condensed version of my final solution.


<?php echo $this->render('header.phtml'); ?>

<!-- The header.phtml ends with a table tag, but does not open a row, be sure to add it -->
<!-- Open up a table row and table cell, otherwise the YUI datagrid will not display correctly -->
<tr><td>

<!-- Assume there are links to YUI controls here -->

<div id="markup" style="width:850px; text-align:center;">
   <table id="data" width="100%" border="0" cellspacing="0" cellpadding="1" class="itemList">
      <thead>
         <tr class="itemListTitle">
            <?php foreach($this->columnDefs as $columnArray) : ?>
               <td><?php echo $columnArray['label']; ?></td>
            <?php endforeach; ?>
         </tr>
      </thead>
      <tbody>
         <?php foreach($this->importData as $importArray) : ?>
         <tr>
            <?php foreach($this->importSchema as $colName) : ?>
            <td><?php echo$importArray[$colName] ?></td>
            <?php endforeach; ?>
         </tr>
         <?php endforeach; ?>
      </tbody>
   </table>
</div>

< S C R I P T type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
   YAHOO.example.EnhanceFromMarkup = new function() {
      var myColumnDefs = [
            {key:"id",label:"Import",sortable:true},
            {key:"category",label:"Category/Name",sortable:true},
            {key:"uploaddate", label:"Upload Date",sortable:true},
            {key:"uploader",label:"Uploaded By",sortable:true},
            {key:"list",label:"Mailing List",sortable:true},
            {key:"checks",label:"Import Progress",sortable:true},
            {key:"status",label:"Status",sortable:true}
         ];
      

      var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("data"));
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
      myDataSource.responseSchema = {
         fields: [ {key: "id", parser:"number" },
      {key: "category" },
      {key: "uploaddate" },
      {key: "uploader" },
      {key: "list" },
      {key: "checks" },
      {key: "status" }
   ]
};

      var oConfigs = {
         paginator: new YAHOO.widget.Paginator({rowsPerPage: 10}),
         sortedBy: {key:"id",dir:"desc"}
      };

      // Load the datatable       var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource, oConfigs);
      
   };
});
</script>

<!-- Close the Outer Table Row -->
   </td>
</tr>

<?php echo $this->render('footer.phtml'); ?>

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.