Object doesn't support property or method 'dataTable' - datatable

Question

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

Answer 1

seems that you should to use the following fix:
var j$ = jQuery.noConflict();
The problem is that force.com also includes a lot of javascript libraries that also may use this $ symbol as a shortcut and this can cause all sorts of problems.
Now where ever you would normally use $, use j$.