title: Object doesn't support property or method 'dataTable'
body: <p>Hi I am trying to implement a data table in Visualforce page. I have included the jquery.js, DataTable.Min.Js, Datatable.js in the page in this order. I have initialize the data table like below</p>
  
  <pre><code>$(document).ready( function () {
            var oTable1 = $('#LeadTable').dataTable( {
                  "sPaginationType": "full_numbers",
                  "aoColumnDefs": [ { "bVisible": false, "aTargets": [ ] }],
                  "bLengthChange": false,
                  "bAutoWidth": false,
                  "iDisplayLength" : 20,
                  "aaSorting": [[ 4, "desc" ]],
                  "oColumnFilterWidgets": { "aiExclude": [ 0, 3, 4 ] }
             });
  });
  </code></pre>
  
  <p>I am getting the error "Object doesn't support property or method 'dataTable'". I check what is the issue?
  Thanks.</p>
  
  <h1>VF page</h1>
  
  <pre><code>&lt;apex:page controller="HomeBasedClass"  id="thePage" &gt;
      &lt;apex:stylesheet value="{!$Resource.RoleHierarchyPopupStyle}"/&gt;
  
  
  
  
  
  
      &lt;style type="text/css"&gt;
          body{
              background-color: #f5f5f5;
  
          }
  
          #Initialloading{
              width: 100%;
              height: 500px;
              top: 200px;
              /*left: 200px;*/
              /*position: fixed;*/
              display: block;
              z-index: 99
          }
  
          #loading-image{
              position: absolute;
              top: 40%;
              left: 45%;
              z-index: 100
          }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
          var i = setInterval(function () {
              clearInterval(i);
  
              // The desired code is only this:
              document.getElementById("Initialloading").style.display = "none";
              document.getElementById("thePage:formId").style.display = "";
  
          }, 5000);
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          function showPopUp(divId)
           {
              document.getElementById(divId).style.display = '';
           }
  
           function ClosePopup(divId){
               document.getElementById(divId).style.display = 'none';
           }
      &lt;/script&gt;
      &lt;style&gt;
          #LeadTable { border-collapse: collapse; }
          h3 {    color: #333333;
             font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
             font-size: 14px;
             line-height: 20px;
            }
  
         #panel table { border-collapse: collapse; }
  
      &lt;/style&gt;
  
      &lt;style&gt;
          .button { background: url('{!$Resource.LoadingButton}') no-repeat left top; width:335px; height:65px;}
          .circle {
  
              width:22px;
              height:22px;
              float:left;   
              margin-bottom:18px; 
              margin-top:18px;
              margin-left: 55px;
          }
  
          .txt {
              font-family:Verdana, Arial, Helvetica, sans-serif;
              font-size:13px;
              color:#000000;
              line-height:20px;
              margin-left:15px;
              margin-bottom:18px;
              margin-top:18px; 
              width: 200px;
              font-weight: bold;
              float: left;
          }
         #TaskTable_paginate {
          height:35px;
         } 
      &lt;/style&gt;
      &lt;div id="Initialloading" align="center"&gt;
         &lt;img src="{!$Resource.Loading}" /&gt;
         &lt;br/&gt;&lt;br/&gt;
         &lt;font color="Red"&gt;Please Wait...&lt;/font&gt;
      &lt;/div&gt;  
      &lt;apex:form id="formId" style="display:none;"&gt;
  
          &lt;!--&lt;script src="/soap/ajax/15.0/connection.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="/soap/ajax/15.0/apex.js" type="text/javascript"&gt;&lt;/script&gt;--&gt;
  
  
  
          &lt;!--&lt;apex:includeScript value="{!$Resource.jQueryLib19Compress}"/&gt;
          &lt;script src="{!URLFOR($Resource.DataTables, 'media/js/jquery.dataTables.min.js')}"&gt;&lt;/script&gt;
          &lt;script src="{!URLFOR($Resource.DataTables, 'media/js/jquery.dataTables.js')}"&gt;&lt;/script&gt;
          &lt;script src="{!URLFOR($Resource.DataTables, 'media/js/ColVis.js')}"&gt;&lt;/script&gt;
          &lt;script src="{!URLFOR($Resource.DataTables, 'media/js/ZeroClipboard.js')}"&gt;&lt;/script&gt;
          &lt;script src="{!URLFOR($Resource.DataTables, 'media/js/TableTools.js')}"&gt;&lt;/script&gt;
          &lt;script src="{!URLFOR($Resource.DataTables, 'media/js/ColumnFilterWidgets.js')}"&gt;&lt;/script&gt;--&gt;
          &lt;apex:includeScript value="{!$Resource.DtJQueryJs}"/&gt;
          &lt;apex:includeScript value="{!$Resource.DtDataTableMinJs}"/&gt;
          &lt;apex:includeScript value="{!$Resource.DtDataTableJs}"/&gt;
          &lt;apex:stylesheet value="{!URLFOR($Resource.DataTables, 'media/css/DataTablesAdvancedExample.css')}"/&gt;
          &lt;script type="text/javascript"&gt;
  
              $(document).ready( function () {
                  var oTable1 = $('#LeadTable').dataTable( {
                        "sPaginationType": "full_numbers",
                        "aoColumnDefs": [ { "bVisible": false, "aTargets": [ ] }],
                        "bLengthChange": false,
                        "bAutoWidth": false,
                        "iDisplayLength" : 20,
                        "aaSorting": [[ 4, "desc" ]],
                        "oColumnFilterWidgets": { "aiExclude": [ 0, 3, 4 ] }
                   });
  
                  var oTable2 = $('#JobprofileTable').dataTable( {
                             "sPaginationType": "full_numbers",
                             "iDisplayLength" : 5,
                             "bLengthChange": false,
                             "aoColumnDefs": [ { "bVisible": false, "aTargets": [ ] }],
                             "aaSorting": [[ 5, "desc" ]],
                             "oColumnFilterWidgets": { "aiExclude": [ 0, 3, 4 ]}
                 });
  
  
            });
  
            function startSplash() {
               document.getElementById('splashDiv').style.display='';
            }
  
            function endSplash() {            
              document.getElementById('splashDiv').style.display='none';
            }
          &lt;/script&gt;
  
          &lt;div class="button" id="splashDiv" style="display: none; position: fixed; left: 500px; top: 250px; border: 0px; z-index: 9999;"&gt;
              &lt;div class="circle"&gt;&lt;apex:image value="{!$Resource.LoadingImage}"&gt;&lt;/apex:image&gt;&lt;/div&gt;
              &lt;div class="txt"&gt;Please Wait. Loading...&lt;/div&gt;
          &lt;/div&gt; 
          &lt;apex:actionStatus id="splashStatus"  onstart="startSplash();" onstop="endSplash();" /&gt;
  
          &lt;apex:actionFunction name="ajaxSetClientLoaded" action="{!setClientLoaded}" immediate="true" rerender="formId"/&gt; 
          &lt;apex:sectionHeader subtitle="Home Base - Sales Rep Dashboard"/&gt;
          &lt;a href="#thePage:formId:leadSection"&gt;Leads&lt;/a&gt;&amp;nbsp; &amp;nbsp;|&lt;apex:outputLabel &gt;&amp;nbsp; &amp;nbsp;&lt;/apex:outputLabel&gt;&lt;a href="#thePage:formId:jobProfileSection"&gt;&lt;apex:outputLabel &gt;Job Profiles&lt;/apex:outputLabel&gt;&lt;/a&gt;&lt;apex:outputLabel &gt;&amp;nbsp; &amp;nbsp;|&lt;/apex:outputLabel&gt;&amp;nbsp; &amp;nbsp;&lt;a href="#thePage:formId:OpportunitySection"&gt;Opportunities&lt;/a&gt;&amp;nbsp; &amp;nbsp;|&amp;nbsp; &amp;nbsp;&lt;a href="#thePage:formId:TaskSection"&gt;Activities&lt;/a&gt;&amp;nbsp; &amp;nbsp;|&amp;nbsp; &amp;nbsp;&lt;a href="#thePage:formId:OrderSection"&gt;Orders &amp;amp; Deliveries&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
          &lt;label style="cursor:pointer; text-decoration:underline" onclick="showPopUp('descreteAddDiv');"&gt;{!$UserRole.Name}&lt;/label&gt;&lt;br/&gt;&lt;br/&gt;
          &lt;div id="descreteAddDiv" style="display:none;"&gt;
              &lt;apex:outputPanel styleClass="DescAddresspopupBackground" layout="block" /&gt;
              &lt;apex:outputPanel id="fulfillingBranchPanel" style="-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 10px;" styleClass="custDescAddressPopup" layout="block" &gt;
                  &lt;div style="width:25px; float:right;padding:5px 5px; cursor:pointer;" onclick="ClosePopup('descreteAddDiv');"&gt;[X]&lt;/div&gt;
                      &lt;apex:iframe src="/apex/testpage" width="100%" height="350px" scrolling="true"/&gt;          
              &lt;/apex:outputPanel&gt;
          &lt;/div&gt;
  
          &lt;!-- ----------------------------------------------------Lead section Start------------------------------------------ --&gt;
          &lt;apex:pageBlock id="leadSection" &gt;
              &lt;table width="100%" border="1" cellpadding="5" cellspacing="8"&gt;
                   &lt;tr&gt;
                      &lt;td align="left" colspan="2"&gt;&lt;h3&gt;Leads&lt;/h3&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td width="25%" valign="top" height="265px;"&gt;
                          &lt;apex:outputPanel id="componentPnl"&gt;
                              &lt;c:LeadGraphComponent userId="{!SelectedUserId}" id="LeadComponent"/&gt;
                          &lt;/apex:outputPanel&gt;
                      &lt;/td&gt;
                      &lt;td width="75%" valign="top"&gt;
                          &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="LeadTable" &gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                       &lt;th style="font-weight: bold; text-align: center; font-family: Arial; font-size: 8pt;"&gt;Company&lt;/th&gt;
                                       &lt;th&gt;Name&lt;/th&gt;
                                       &lt;th&gt;Phone&lt;/th&gt;
                                       &lt;th&gt;Servicing Branch ID&lt;/th&gt;
                                       &lt;th&gt;Created Date&lt;/th&gt;
                                       &lt;th&gt;Last Activity Date&lt;/th&gt;
                                       &lt;th&gt;Next Activity Date&lt;/th&gt;
                                   &lt;/tr&gt;
                               &lt;/thead&gt;
                               &lt;tbody&gt;
                                   &lt;apex:repeat value="{!LstLeadGrid}" var="c"&gt;
                                       &lt;tr&gt;
                                          &lt;td&gt;&lt;a href="https://c.cs3.visual.force.com/{!c.id}" target="_blank"&gt;{!c.Company}&lt;/a&gt;&lt;/td&gt;
                                          &lt;td&gt;{!c.Name}&lt;/td&gt;
                                          &lt;td&gt;{!c.Phone}&lt;/td&gt;
                                          &lt;td&gt;{!c.Servicing_Branch_Id__c}&lt;/td&gt;
                                          &lt;td&gt;
                                               &lt;apex:outputText value="{0,date,MM'/'dd'/'yyyy}"&gt;
                                                  &lt;apex:param value="{!c.Created_Date_Time__c}"/&gt; 
                                              &lt;/apex:outputText&gt;
                                          &lt;/td&gt;
                                          &lt;td&gt;
                                               &lt;apex:outputText value="{0,date,MM'/'dd'/'yyyy}"&gt;
                                                  &lt;apex:param value="{!c.Last_Activity_Datetime__c }" /&gt; 
                                              &lt;/apex:outputText&gt;
                                          &lt;/td&gt;
                                          &lt;td&gt;
                                               &lt;apex:outputText value="{0,date,MM'/'dd'/'yyyy}"&gt;
                                                  &lt;apex:param value="{!c.Next_Activity_Date__c}" /&gt; 
                                              &lt;/apex:outputText&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                   &lt;/apex:repeat&gt;
                               &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/apex:pageBlock&gt;
          &lt;!-- ----------------------------------------------------Lead section End------------------------------------------ --&gt;
          &lt;!-- ----------------------------------------------------Job Profile section Start------------------------------------&gt;
          &lt;!-- ------rendered="{!IF(($UserRole.Name == 'Branch Manager - US') || ($UserRole.Name == 'Customer Sales Specialist - NSC - US') || ($UserRole.Name == 'Regional Manager - US') || ($UserRole.Name == 'Sales Rep - US') || ($UserRole.Name == 'Territory Sales Mgr - US'),true,false)}"----&gt;
          &lt;apex:pageBlock id="jobProfileSection" &gt;
              &lt;table width="100%" border="1" cellpadding="5" cellspacing="8"&gt;
                   &lt;tr&gt;
                      &lt;td align="left" colspan="2"&gt;&lt;h3&gt;Job Profiles&lt;/h3&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td width="25%" valign="top" height="265px;"&gt;
                          &lt;apex:outputPanel id="componentPnl"&gt;
                              &lt;c:JobProfileComponent userId="{!SelectedUserId}" id="JpComponent"/&gt;
                          &lt;/apex:outputPanel&gt;
                      &lt;/td&gt;
                      &lt;td rowspan="2" width="75%" valign="top"&gt;
                          &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="JobprofileTable" &gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                       &lt;th&gt;Job profile Name&lt;/th&gt;
                                       &lt;th&gt;Job Profile ID&lt;/th&gt;
                                       &lt;th&gt;BranchID&lt;/th&gt;
                                       &lt;th&gt;Valuation&lt;/th&gt;
                                       &lt;th&gt;GC Name&lt;/th&gt;
                                       &lt;th&gt;JS City&lt;/th&gt;
                                       &lt;th&gt;JS State&lt;/th&gt;
                                       &lt;th&gt;Job Name&lt;/th&gt;
                                       &lt;th&gt;JS Zip&lt;/th&gt;
                                   &lt;/tr&gt;
                               &lt;/thead&gt;
                               &lt;tbody&gt;
                                   &lt;apex:repeat value="{!LstJobProfileGrid}" var="c"&gt;
                                       &lt;tr&gt;
                                          &lt;td align="left" style="font-colour: black;"&gt;&lt;a href="https://c.cs3.visual.force.com/{!c.id}" target="_blank"&gt;{!c.Name}&lt;/a&gt;&lt;/td&gt;
                                          &lt;td align="center"&gt;{!c.Job_Profile_ID__c}&lt;/td&gt;
                                          &lt;td align="center"&gt;{!c.Branch_ID__c}&lt;/td&gt;
                                          &lt;td align="center"&gt;{!c.Valuation__c}&lt;/td&gt;
                                          &lt;td align="center"&gt;{!c.GC_Awarded_Dodge__c}&lt;/td&gt;
                                          &lt;td align="center"&gt;{!c.Job_Site_City__c}&lt;/td&gt;
                                          &lt;td align="center"&gt;{!c.Job_Site_State__c}&lt;/td&gt;
                                          &lt;td align="center"&gt;{!c.Name}&lt;/td&gt;
                                          &lt;td align="center"&gt;{!c.Job_Site_Zip__c}&lt;/td&gt;
                                      &lt;/tr&gt;
                                   &lt;/apex:repeat&gt;
                               &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/apex:pageBlock&gt; 
          &lt;!-- ----------------------------------------------------Job Profile End------------------------------------------ --&gt;
          &lt;!-- ----------------------------------------------------Opportunity section Start------------------------------------------ --&gt; 
          &lt;apex:pageBlock id="OpportunitySection"&gt;
              &lt;c:OpportunityComponent userId="{!SelectedUserId}" id="OppComponent"/&gt;
          &lt;/apex:pageBlock&gt;
          &lt;!-- ----------------------------------------------------Opportunity section End------------------------------------------ --&gt;
          &lt;!-- ----------------------------------------------------Activity section Starts------------------------------------------ --&gt;
          &lt;apex:pageBlock id="TaskSection"&gt;
  
              &lt;script type="text/javascript" charset="UTF-8"&gt;
  
                  $(document).ready( function () {
                          var oTable4 = $('#TaskTable').dataTable( {
                                "sPaginationType": "full_numbers",
                                "aoColumnDefs": [ { "bVisible": false, "aTargets": [ ] }],
                                "bLengthChange": false,
                                "iDisplayLength" : 20,
                                "oColumnFilterWidgets": { "aiExclude": [ 0, 3, 4 ] }
                        });
                   });
  
              &lt;/script&gt;
              &lt;table width="100%" border="0"&gt;
                  &lt;tr&gt;
                      &lt;td align="left"&gt;
                          &lt;h3&gt;My Activities&lt;/h3&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a target="_blank" href="https://cs3.salesforce.com/setup/ui/recordtypeselect.jsp?ent=Opportunity&amp;retURL=%2F006%2Fo&amp;save_new_url=%2F006%2Fe%3FretURL%3D%252F006%252Fo" style="Text-decoration:none;Cursor:pointer"&gt;&lt;img src="https://cs3.salesforce.com/resource/1359464023000/ZoomImage" Title="Create New Opportunity"/&gt; Create New Opportunity&lt;/a&gt;
                      &lt;/td&gt;
                      &lt;td align="right"&gt;
                          &lt;apex:selectList value="{!SelectedTaskName}" size="1" style="width:250px;"&gt;
                              &lt;apex:selectOptions value="{!lstTaskOptions}"/&gt;
                              &lt;apex:actionSupport event="onchange" action="{!ChangeSelectedTaskName}" rerender="TaskSection" status="splashStatus"/&gt;
                          &lt;/apex:selectList&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;div id="panel" &gt;
                  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="TaskTable" style="margin-top:20px;"&gt;
                      &lt;thead&gt;
                       &lt;tr&gt;
                           &lt;th&gt;Subject&lt;/th&gt;
                           &lt;th&gt;Due Date&lt;/th&gt;
                           &lt;th&gt;MMI Call Type&lt;/th&gt;
                           &lt;th&gt;Account Name&lt;/th&gt;
                           &lt;th&gt;Name&lt;/th&gt;
                           &lt;th&gt;Related To&lt;/th&gt;
                           &lt;th&gt;Phone&lt;/th&gt;
                       &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;apex:repeat value="{!LstTaskGrid}" var="c"&gt;
                              &lt;tr&gt;
                                &lt;td&gt;&lt;a href="https://c.cs3.visual.force.com/{!c.id}" target="_blank"&gt;{!c.Subject}&lt;/a&gt;&lt;/td&gt;
                                &lt;td style= "{!IF(AND(NOT(ISBLANK(c.ActivityDate)),c.ActivityDate- Today() &lt; 0), 'color:red;', 'color:black;')}"&gt;
                                    &lt;apex:outputText value="{0,date,MM'/'dd'/'yyyy}"&gt;
                                        &lt;apex:param value="{!c.ActivityDate}" /&gt; 
                                    &lt;/apex:outputText&gt;
                                &lt;/td&gt;
                                &lt;td&gt;{!c.Call_Type__c}&lt;/td&gt;
                                &lt;td&gt;{!c.Account.Name}&lt;/td&gt;
                                &lt;td&gt;{!c.Who.Name}&lt;/td&gt;
                                &lt;td&gt;{!c.What.Name}&lt;/td&gt;
                                &lt;td&gt;{!c.Who.Phone}&lt;/td&gt;  
                            &lt;/tr&gt;
                           &lt;/apex:repeat&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
               &lt;/div&gt;
          &lt;/apex:pageBlock&gt;
          &lt;!-- ----------------------------------------------------Activity section End------------------------------------------ --&gt;
          &lt;!-- ----------------------------------------------------Order and Delivery section Starts------------------------------------------ --&gt;
          &lt;div style="width:100%; overflow:auto;border: 1px solid #F00;" &gt;
          &lt;apex:pageBlock id="OrderSection"&gt;
              &lt;script type="text/javascript" charset="UTF-8"&gt;
  
                  $(document).ready( function () {
                      var oTable5 = $('#OrderTable').dataTable( {
                            "sPaginationType": "full_numbers",
                            "aoColumnDefs": [ { "bVisible": false, "aTargets": [ ] }],
                            "bLengthChange": false,
                            "bAutoWidth": false,
                            "iDisplayLength" : 15,
                            "oColumnFilterWidgets": { "aiExclude": [ 0, 3, 4 ] }
                       });
                   });
  
              &lt;/script&gt;
              &lt;table width="100%" border="0"&gt;
                  &lt;tr&gt;
                      &lt;td align="left"&gt;
                          &lt;h3&gt;Orders &amp;amp; Deliveries&lt;/h3&gt;
                      &lt;/td&gt;
                      &lt;td align="right"&gt;
                          &lt;apex:selectList value="{!SelectedlstOrdDelivOptionsName}" size="1" style="width:250px;"&gt;
                              &lt;apex:selectOptions value="{!lstOrdDelivOptions}"/&gt;
                              &lt;apex:actionSupport event="onchange" action="{!ChangeOrderDelivery}" rerender="OrderSection" status="splashStatus"/&gt;
                          &lt;/apex:selectList&gt;&lt;br/&gt;&lt;br/&gt;
                          &lt;apex:selectList value="{!SelectedOrdDelivTimeName}" size="1" style="width:250px;"&gt;
                              &lt;apex:selectOptions value="{!lstOrdDelivTimeOptions}"/&gt;
                              &lt;apex:actionSupport event="onchange" action="{!ChangeOrderDelivery}" rerender="OrderSection" status="splashStatus"/&gt;
                          &lt;/apex:selectList&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="OrderTable" style="margin-top:20px;"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                           &lt;th&gt;Account #&lt;/th&gt;
                           &lt;th&gt;Account Name&lt;/th&gt;
                           &lt;th&gt;Order Type&lt;/th&gt;
                           &lt;th&gt;Transaction Code&lt;/th&gt;
                           &lt;th&gt;Servicing Branch ID&lt;/th&gt;
                           &lt;th&gt;Item Code&lt;/th&gt;
                           &lt;th&gt;Total Amt&lt;/th&gt;
                           &lt;th&gt;Delivery Date&lt;/th&gt;
                           &lt;th&gt;Activation Date&lt;/th&gt;
                           &lt;th&gt;Fuel Surcharge Delivery&lt;/th&gt;
                           &lt;th&gt;Fuel Surcharage PickUp&lt;/th&gt;
                           &lt;th&gt;PPE&lt;/th&gt;
                           &lt;th&gt;LLW&lt;/th&gt;
                           &lt;th&gt;Delivery Contact Name&lt;/th&gt;
                           &lt;th&gt;Delivery Contact #&lt;/th&gt;
                           &lt;th&gt;Order #&lt;/th&gt;
                       &lt;/tr&gt;
                      &lt;/thead&gt;
                          &lt;tbody&gt;
                        &lt;apex:repeat value="{!LstOrdersAndDelieveriesGrid}" var="c"&gt;
                             &lt;tr&gt;
                                &lt;td&gt;{!c.Account_Number__c}&lt;/td&gt;
                                &lt;td&gt;{!c.Name}&lt;/td&gt;
                                &lt;td&gt;{!c.Transaction_Code__c}&lt;/td&gt;
                                &lt;td&gt;{!c.Transaction_Code__c }&lt;/td&gt;
                                &lt;td&gt;{!c.Transaction_Code__c}&lt;/td&gt;
                                &lt;td&gt;{!c.Item_Code__c}&lt;/td&gt;
                                &lt;td&gt;{!SUBSTITUTE(TEXT(ROUND(c.Total__c, 0)), ".", "," )}&lt;/td&gt;
                                &lt;td&gt;
                                     &lt;apex:outputText value="{0,date,MM'/'dd'/'yyyy}"&gt;
                                        &lt;apex:param value="{!c.Delivery_Date__c}"/&gt; 
                                    &lt;/apex:outputText&gt;
                                &lt;/td&gt;
                                &lt;td&gt;
                                     &lt;apex:outputText value="{0,date,MM'/'dd'/'yyyy}"&gt;
                                        &lt;apex:param value="{!c.Activation_Date__c}"/&gt; 
                                    &lt;/apex:outputText&gt;
                                &lt;/td&gt;
                                &lt;td&gt;
                                  &lt;apex:outputText value="{0,date,MM'/'dd'/'yyyy}"&gt;
                                        &lt;apex:param value="{!c.Fuel_Surcharge_Delivery__c}"/&gt; 
                                  &lt;/apex:outputText&gt;
                                &lt;/td&gt;
                                &lt;td&gt;
                                  &lt;apex:outputText value="{0,date,MM'/'dd'/'yyyy}"&gt;
                                        &lt;apex:param value="{!c.Fuel_Surcharage_PickUp__c}"/&gt; 
                                  &lt;/apex:outputText&gt;
  
                                &lt;/td&gt;
                                &lt;td&gt;{!c.PPE__c}&lt;/td&gt;
                                &lt;td&gt;{!c.LLW__c}&lt;/td&gt;
                                &lt;td&gt;{!c.Delivery_Contact_Name__c}&lt;/td&gt;
                                &lt;td&gt;{!c.Delivery_Contact_Number__c}&lt;/td&gt;
                                &lt;td&gt;{!c.Order_Number__c}&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/apex:repeat&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
         &lt;/apex:pageBlock&gt;
         &lt;/div&gt;
          &lt;!-- ----------------------------------------------------Order and Delivery section End------------------------------------------ --&gt;
      &lt;/apex:form&gt;
      &lt;style&gt;
          body{
              background-color: #f5f5f5;
          }
  
          /*#OrderTable_wrapper {width:100%; overflow:auto;}*/
      &lt;/style&gt;
  
  &lt;/apex:page&gt;
  </code></pre>