I have a visualforce page which makes use of a template. I am trying to use jquery datatable to add funtionality to the pageblocktable. My code works on just a normal non-templated visualforce page but once I add it to the page with the template it breaks. I have made sure that the right $component id is being returned by verifying in developer tools yet the page continues to break. Here is my code:
the apex composition:
<apex:page standardStylesheets="false" showHeader="false" docType="HTML-5.0" id="theSection">
<apex:stylesheet value="{!URLFOR($Resource.BF_theme, 'css/style.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery-1.9.1.min.js')}"/>
<!--[if lte IE 8]>
<style>
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
INPUT[type='text'] {
margin-bottom: 0px;
}
</style>
<![endif]-->
<!--[if IE 9]>
<style>
.closebtn {
width: 100%;
position: relative;
}
</style>
<![endif]-->
<apex:composition template="Template_TopBar"/>
<!--<div class="container"> -->
<apex:composition template="Template_Header"/>
<!-- <div class="content, w100"> -->
<apex:insert name="zoneA"/>
<!--</div> -->
<apex:composition template="Template_Footer"/>
<!--</div>-->
</apex:page>
And here is the full page with the template
<apex:page Controller="CasesController" showHeader="false" docType="HTML-5.0" id="thePage">
<head>
<title>Cases</title>
</head>
<apex:composition template="MasterPage_FullWidthTest">
<apex:define name="zoneA">
<apex:form id="theForm">
<apex:pageBlock id="thePageBlock">
<apex:pageBlockTable value="{!MyCaseList}" var="mylist" id="thePageBlockTables" styleClass="datatable">
<apex:column headerValue="Case Number">
<apex:outputLink value="{!mylist.CaseNumber}">{!mylist.CaseNumber}</apex:outputLink>
</apex:column>
<apex:column value="{!mylist.CreatedDate}"/>
<apex:column value="{!mylist.Requested_By__c}"/>
<apex:column value="{!mylist.Subject}"/>
<apex:column value="{!mylist.Release_Type__c}"/>
<apex:column value="{!mylist.Status}"/>
<apex:column value="{!mylist.Priority}"/>
<apex:column value="{!mylist.Major_Release_Version__c}"/>
<apex:column value="{!mylist.OwnerId}"/>
<apex:column value="{!mylist.Type}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:define>
</apex:composition>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery-1.9.1.min.js')}"/>
<script type="text/javascript" language="javascript" src=" {!URLFOR($Resource.jQueryDataTablesZip, 'jQueryDataTablesZip/js/jquery.dataTables.min.js')}"></script>
<apex:stylesheet value="{!URLFOR($Resource.jQueryDataTablesZip, 'jQueryDataTablesZip/css/jquery.dataTables.css')}"/>
<style type="text/css">
.sorting {
background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'jQueryDataTablesZip/images/sort_both.png') }') no-repeat center right !important;
padding-right: 20px !important;
}
.sorting_asc {
background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'jQueryDataTablesZip/images/sort_asc.png') }') no-repeat center right !important;
padding-right: 20px !important;
}
.sorting_desc {
background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'jQueryDataTablesZip/images/sort_desc.png') }') no-repeat center right !important;
padding-right: 20px !important;
}
.sorting_asc_disabled {
background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'jQueryDataTablesZip/images/sort_asc_disabled.png') }') no-repeat center right !important;
padding-right: 20px !important;
}
.sorting_desc_disabled {
background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'jQueryDataTablesZip/images/sort_desc_disabled.png') }') no-repeat center right !important;
padding-right: 20px !important;
}
table.dataTable tr.odd { background-color: white; }
table.dataTable tr.even { background-color: white; }
table.dataTable tr.odd td.sorting_1 { background-color: white; }
table.dataTable tr.odd td.sorting_2 { background-color: white; }
table.dataTable tr.odd td.sorting_3 { background-color: white; }
table.dataTable tr.even td.sorting_1 { background-color: white; }
table.dataTable tr.even td.sorting_2 { background-color: white; }
table.dataTable tr.even td.sorting_3 { background-color: white; }
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
padding: 3px;
}
</style>
<script language="javascript" type="text/javascript">
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var dataTables = document.getElementById("{!$Component.thePage.theSection.theForm.thePageBlock.thePageBlockTables}");
j$(dataTables).dataTable();
} );
</script>
</apex:page>
Thanks for any suggestions.
