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.

2
  • What error messages are displayed in your web browser's console?
    – Mark Pond
    Jun 11, 2014 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. Jun 11, 2014 at 18:35

1 Answer 1

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .