0

Please check my visualforce code

<apex:page standardcontroller="Event_and_Lecture__c" extensions="Sim_EventOfficeContactsController" docType="html-5.0" showheader="false" sidebar="false">

    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 
    <script>
    $(document).ready( function () {
    $('#frm:OfficeContactList:myTable').DataTable();
} );
    </script>
    <script>
   function setFocusOnLoad() {}
    function runsearch(){
            var str= document.getelementById('{!$Component.frm.OfficeContactList.search_offcontacts.searchstr}').value;
            if(str.length>=2){
                doSearchJs();
                }
                else{
                    alert('Please Enter Atleast two characters');
                    }
            }


      </script>
    <apex:form id="frm">
        <apex:slds />

        <!--apex:actionFunction name="doSearchJs" action="{!initOfficeContacts}" rerender="frm"/-->




        <apex:pageBlock title="Office Contacts" id="OfficeContactList" >
            <apex:pageBlockSection id="search_offcontacts">

                <!--apex:inputText id="searchstr" value="{!searchstr}"/-->
            <!--apex:commandButton value="Search" onclick="runsearch();"/-->

            </apex:pageBlockSection>
            <apex:pageBlockButtons location="top">
                <apex:commandButton value="New" action="{!add}" reRender="OfficeContactList" status="busyMsgDiv"/>
                <apex:commandButton value="Save" action="{!save}" reRender="OfficeContactList" status="busyMsgDiv"/>
                <apex:actionStatus id="busyMsgDiv" startStyleClass="requiredLoaderBG" stopStyleClass="hidden" layout="block"/>
            </apex:pageBlockButtons>
            <apex:outputPanel layout="block" styleClass="tableWrapper" id="tableWrapper" rendered="{!hasContacts}">
                <apex:pageBlockTable value="{!officeContacts}" var="ocw"  id ="myTable">
                    <apex:column headerValue="Action" width="20px">
                        <apex:commandLink style="font-size:12px; text-align:center;" value="Del"
                        immediate="true" action="{!delRow}" reRender="OfficeContactList" status="busyMsgDiv"> 
                            <apex:param value="{!ocw.rowIndex}" name="index" assignto="{!selectedIndex}"/>
                        </apex:commandLink>
                    </apex:column>
                    <apex:column headerValue="Name" > <apex:inputField required="true" value="{!ocw.officeContact.Name}" />   </apex:column>
                    <apex:column headerValue="Type" > <apex:inputField value="{!ocw.officeContact.Type__c}" />   </apex:column>
                    <apex:column headerValue="Phone" > <apex:inputField value="{!ocw.officeContact.Phone__c}" type="tel"/> </apex:column>
                    <apex:column headerValue="Email"> <apex:inputField value="{!ocw.officeContact.email__c}" type="email" style="width:120px"/> </apex:column>
                    <apex:column headerValue="Preferences"> <apex:inputField value="{!ocw.officeContact.Preferences__c}" style="width:120px" />   </apex:column>
                    <apex:column headerValue="CORE Referral Manager" rendered="{!IF($Profile.Name =='SOS Profile', false , true)}"> <apex:inputField value="{!ocw.officeContact.CORE_Referral_Manager__c}" style="width:120px"  />   </apex:column>
                    <apex:column headerValue="Account"><apex:outputField value="{!ocw.officeContact.Account__c}"/></apex:column>    

            </apex:pageBlockTable>
            </apex:outputPanel>
            <apex:outputPanel rendered="{!hasContacts}" id="emptyBlock">
                <h4>There are no Office Contacts added. Please click New button to create.</h4>
            </apex:outputPanel>
        </apex:pageBlock>
<style>
    body .bPageBlock{
        border-left:none !important;
        border-right:none !important;
        border-top-width: 0px; !important;
    }
    body .bPageBlock .pbHeader{
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    body .bPageBlock .pbHeader .pbTitle{
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-right: 0px !important;
        padding-left: 5px !important;
    }

    body .bPageBlock .pbHeader .pbButton{
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    body .bPageBlock .pbBody {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    .tableWrapper{
        float:left;
        overflow: auto;
        width:100%;
        height: 169px;
    }
    .requiredLoaderBG{
        background-color: rgb(71,71,71);
        opacity:0.7;
        filter:alpha(opacity=70);
        background-image:url('/img/loading.gif');
        background-position: center center;
        background-repeat: no-repeat;
        height: 100%;
        left: 0;
        position: fixed;
        text-align: center;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    .hidden{
        display:none;
    }
</style>
    </apex:form>

</apex:page>

enter image description here

1 Answer 1

0

You haven't provided an id for the page or you haven't included that id in your selector:

$('#frm:OfficeContactList:myTable').DataTable();

So, at the moment the actual id of the element will be different to this.

You need to add id to apex:page (and any other container elements):

<apex:page id='page-id'>

then change selector to:

$('#page-id:frm:OfficeContactList:myTable').DataTable();

Also:

you also need to change your script links to https:

 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

And escape colons in your jQuery selector :

$('#pageid\\:frm\\:OfficeContactList\\:myTable').DataTable();
1
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Adrian Larson
    Jan 31, 2020 at 16:45

You must log in to answer this question.

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