1

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.

  • What error messages are displayed in your web browser's console? – Mark Pond Jun 11 '14 at 18:01
  • @MarkPond- sorry I should have updated this earlier. I found what the issue was. The template_header has some cdn video links that for some reason only plays nice with jQuery 1.7.2. I removed it from the page and got the dataTable working. Thanks. – sw6 - KTBFFH Jun 11 '14 at 18:35
1

I found what the issue was. The template_header has some cdn video links that for some reason only plays nice with jQuery 1.7.2. I removed it from the page and the dataTable started working as expected. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.