How to Display the Empty Table in the “No Records Found” Pages in Websites that Generated by PHPMaker 9.0.1

As we know, PHPMaker 9 only displays the message “No records found” without including an empty table that associated with the data and the related fields. It's better now to display an empty table including the fields or columns name of the table in the page that contains that message (even there is no record in that table). This will make your web application users increasingly convinced that they are accessing the right page containing the data they need. This is also very useful on the pages that display a table that does not have records at all in it. That condition is represented by the presence of an empty row in the table I mentioned earlier.

Another advantage from this modification is, it will have a direct impact on the search results pages that do not display any data/record. In addition to displaying the message “No records found” only, then your web application users will see below that message: a table including the fields or columns name, and a blank row that represents the condition that no records are found in the table. In other words, this empty table will help to ensure your users that they are seeing the page without any data/record in it, since the table has the fields/columns name.

All we have to do is customizing the PHPMaker template file. In other words, we do not modify any generated script files.

Updated on May 30, 2012: This customization has been implemented in PHPMaker version 9.0.2, it matches to each other, and as a result, it works properly.

Updated on July 21, 2012: This customization has been implemented in PHPMaker version 9.0.3, it matches to each other, and as a result, it works properly.

Updated on September 4, 2012: This customization has been implemented in PHPMaker version 9.0.4, it matches to each other, and as a result, it works properly.

Updated on November 28, 2012: This customization has been implemented in PHPMaker version 9.1.0, it matches to each other, and as a result, it works properly.

Updated on February 9, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

Updated on June 17, 2013: This customization below has been handled by using MasinoFixedWidthSite extension. You don’t need to implement the customization below if you use my extensions together with the original PHPMaker Template and Extension files.

[hidepost]

1. Open your \Script\list-script.php file, and find this code:

   </td></tr></table>
   
   <!--## if (bUseCustomTemplate) { ##-->
   

   before the first line of that code, please insert the following code:

   <?php // Begin of modification Displaying Empty Table, by Masino Sinaga, May 3, 2012 ?>
   <!--## if (CTRL.CtrlID == "list") { ##-->
   
   <div id="gmp_<!--##=gsTblVar##-->_empty_table" class="ewGridMiddlePanel">
   
   <?php if ($<!--##=sPageObj##-->->TotalRecs == 0) { ?>
   
   <!--##
       var sMainTableStyle = "";
       if (bUseCustomTemplate) {
           sMainTableStyle = " style=\"display: none\"";
       }
   ##-->
   
   <!--## if (iRecPerRow < 1) { // Single Column ##-->
   
   
   <table cellspacing="0" data-rowhighlightclass="ewTableHighlightRow" data-rowselectclass="ewTableSelectRow" data-roweditclass="ewTableEditRow"<!--##=ewCSSTableClass##-->>
   
   
   <?php echo $<!--##=gsTblVar##-->->TableCustomInnerHtml ?>
   
   <thead><!-- Table header -->
       <tr<!--##=ewCSSTableHeaderClass##-->>
   
   <?php
   // Render list options
   // $<!--##=sPageObj##-->->RenderListOptions(); // we do not need this since it is an empty table
   
   // Render list options (header, left)
   <!--## if (bUseCustomTemplate) { ##-->
   // $<!--##=sPageObj##-->->ListOptions->Render("header", "", "", "<!--##=sCustomListOptionsHeader##-->", $<!--##=gsTblVar##-->->TableVar, "<!--##=sTemplateClass##-->"); // we do not need this since it is an empty table
   <!--## } else { ##-->
   // $<!--##=sPageObj##-->->ListOptions->Render("header", "left"); // we do not need this since it is an empty table
   <!--## } ##-->
   
   ?>
   
       <!--##
           for (var i = 0; i < nFldCount; i++) {
               if (GetFldObj(arFlds&#91;i&#93;)) {
                   if (CTRL.CtrlID == "list" && bBasicSearch && goFld.FldBasicSearch &&
                       (goFld.FldHtmlTag == "NO" || goFld.FldHtmlTag == "TEXT" || goFld.FldHtmlTag == "TEXTAREA" ||
                       goFld.NativeDataType == 247 || goFld.NativeDataType == 248 ||
                       (goFld.FldHtmlTag == "FILE" && !ew_IsBinaryField(goFld))))
                       sSrchLegend = "<?php echo $Language->Phrase(\"SrchLegend\") ?>";
                   else
                       sSrchLegend = "";
                   if (iSortType > 0)
                       sJsSort = " class=\"ewPointer\" onmousedown=\"ew_Sort(event,'<?php echo $" + gsTblVar + "->SortUrl($" + gsFldObj + ") ?>'," + iSortType + ");\"";
                   else
                       sJsSort = "";
                   var sScriptStart, sScriptEnd;
                   if (bUseCustomTemplate) {
                       sScriptStart = ew_CustomScriptTag(gsTblVar + "_" + gsFldParm, "header", sTemplateClass);
                       sScriptEnd = "</script>";
                   } else {
                       sScriptStart = "";
                       sScriptEnd = "";
                   }
                   sHeaderSpanId = "elh_" + gsTblVar + "_" + gsFldParm;
                   sClassId = gsTblVar + "_" + gsFldParm;
       ##-->
   <?php if ($<!--##=gsFldObj##-->->Visible) { // <!--##=gsFldName##--> ?>
       <?php if ($<!--##=gsTblVar##-->->SortUrl($<!--##=gsFldObj##-->) == "") { ?>
           <td<!--##=FieldTD_Header(FIELD)##-->><span id="<!--##=sHeaderSpanId##-->" class="<!--##=sClassId##-->"><!--##=SYSTEMFUNCTIONS.FieldCaption()##--></span></td>
       <?php } else { ?>
           <td><!--##=sScriptStart##--><div<!--##=sJsSort##-->><span id="<!--##=sHeaderSpanId##-->" class="<!--##=sClassId##-->">
               <table cellspacing="0" class="ewTableHeaderBtn"<!--##=FieldTD_Header(FIELD)##-->><thead><tr><td><?php echo $<!--##=gsFldObj##-->->FldCaption() ?><!--##=sSrchLegend##--></td><td style="width: 10px;"><?php if ($<!--##=gsFldObj##-->->getSort() == "ASC") { ?><img src="<!--##=sImageFolder##-->sortup.gif" width="10" height="9" border="0"><?php } elseif ($<!--##=gsFldObj##-->->getSort() == "DESC") { ?><img src="<!--##=sImageFolder##-->sortdown.gif" width="10" height="9" border="0"><?php } ?></td></tr></thead></table>
           </span></div><!--##=sScriptEnd##--></td>       
       <?php } ?>
   <?php } ?>     
       <!--##
               }
           } // Field
       ##-->
   
   <!--## if (!bUseCustomTemplate) { ##-->
   <?php
   // Render list options (header, right)
   // $<!--##=sPageObj##-->->ListOptions->Render("header", "right"); // we do not need this since it is an empty table
   ?>
   <!--## } ##-->
   
       </tr>
   </thead>
       <tr>
       <!--##
           for (var i = 0; i < nFldCount; i++) {
               if (GetFldObj(arFlds&#91;i&#93;)) {
                   sFooterSpanId = "elf_" + gsTblVar + "_" + gsFldParm;
                   sClassId = gsTblVar + "_" + gsFldParm;
       ##-->
       <?php if ($<!--##=gsFldObj##-->->Visible) { // <!--##=gsFldName##--> ?>
           <td<!--##=FieldTD_Item(goFld)##-->><span id="<!--##=sFooterSpanId##-->" class="<!--##=sClassId##-->">
       <!--## if (ew_IsNotEmpty(goFld.FldAggregate)) { ##-->
           <!--##=SYSTEMFUNCTIONS.FieldAggregate()##-->
       <!--## } else { ##-->
           &nbsp;
       <!--## } ##-->
           </span></td>
       <?php } ?>
       <!--##
               }
           } // Field
       ##-->
       </tr>
   <tbody>
   
   <!--## } else { // RecPerRow >= 1 (Multi Column) ##-->
   
   <table cellspacing="0" class="ewMultiColumnTable"<!--##=sMainTableStyle##-->>
   
   <!--## } ##-->
   </table>
   </div>
   <?php } ?>
   <!--## } ##-->
   <?php // End of modification Displaying Empty Table, by Masino Sinaga, May 3, 2012 ?>
   

2. The next step, we will customize the ScrollingTable extensions, so this empty table will still support for the scrolling table, especially if the table width is greater than the total width of your web application. Assuming you are a registered user of PHPMaker, so you have already had this extension; otherwise, just skip this step.
   Open your \extensions\ScrollingTable\scroll.js file, and find this code:

   </script>
   <?php } ?>
   <?php } // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
   <!--##
       }
   ##-->
   <!--##/session##-->
   

   before the first line of that code, please insert the following code (only for PHPMaker version < 9.2.0): [code lang="php"] ew_ScrollableTable(ewDom.get('gmp__empty_table'), "px", "px");
   [/code]

   whereas for PHPMaker version >= 9.2.0, please insert the following code:

   setTimeout(function(){ew_ScrollableTable(ewDom.get('gmp_<!--##=gsTblVar##-->_empty_table'), "<?php echo MS_SCROLL_TABLE_WIDTH; ?>px", "<?php echo MS_SCROLL_TABLE_HEIGHT; ?>px");}, 500);
   

   Please note that those two constants above related to the modification about How to Optimize Main Table Width to Maximum Width of Your Site Created with PHPMaker 9.0.1. It is strongly recommended that you implement the customization in that article first before doing the following customization. If you have not implemented that modification, then change the code become the following:

   ew_ScrollableTable(ewDom.get('gmp_<!--##=gsTblVar##-->_empty_table'), "<!--##=sScrollWidth##-->", "<!--##=sScrollHeight##-->");
   

   whereas if you have not implemented the modificaiton above, then for PHPMaker version >= 9.2.0, replace it with the following:

   setTimeout(function(){ew_ScrollableTable(ewDom.get('gmp_<!--##=gsTblVar##-->_empty_table'), "<!--##=sScrollWidth##-->", "<!--##=sScrollHeight##-->");}, 500);
   

[/hidepost]