Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
k2018123k2018123 

jquery data table component

Hi,

I am using jquery data table component recently posted in the blog:
http://sfdcmonkey.com/2018/03/13/jquery-datatable-salesforce-lightning-component/#comment-3313

The issue is if i am using two different component in the same page, search and pagination is appearing in one component and it dissapears in the other component.

Any help will be appreciated.

Thanks
Alain CabonAlain Cabon
Hi,

I use a lot datatable without this problem. 

You should post your code and you will get a fix very quickly.

Many developers of sfdcmonkey are also regular contributors here.
 
k2018123k2018123
<aura:component implements="flexipage:availableForAllPageTypes" access="global"	>
   <lightning:card title="Application Course details" iconName="standard:account" footer="">
      <div class="slds-p-around--large">
    
     <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionOne}">
      <section class="slds-clearfix">
        <div class="slds-float--left ">
            <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
            <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
        </div>
        <div class="slds-m-left--large" style="cursor: pointer;">Declined</div>
      </section>
    </div>
      
    <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
      <c:DataTableACP />
    </div>
      
    <div class="slds-page-header slds-p-top_large" style="cursor: pointer;" onclick="{!c.sectionTwo}">
      <section class="slds-clearfix">
        <div class="slds-float--left">
            <lightning:icon class="slds-show" aura:id="articleTwo" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
            <lightning:icon class="slds-hide" aura:id="articleTwo" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
        </div>
        <div class="slds-m-left--large">Not Started</div>
      </section>
    </div>
      
    <div class="slds-hide slds-p-around--medium" aura:id="articleTwo">
     <c:dataTableACP_Notstarted />
    </div>
      
    <div class="slds-page-header"  style="cursor: pointer;" onclick="{!c.sectionThree}">
      <section class="slds-clearfix">
        <div class="slds-float--left"> 
            <lightning:icon class="slds-show" aura:id="articleThree" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
            <lightning:icon class="slds-hide" aura:id="articleThree" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
        </div>
        <div class="slds-m-left--large">In Progress</div>
      </section>
    </div>
      
    <div aura:id="articleThree" class="slds-hide slds-p-around--medium">
     <c:dataTableACP_InProgess />
    </div>
      
    <div class="slds-page-header"  style="cursor: pointer;" onclick="{!c.sectionFour}">
      <section class="slds-clearfix">
        <div class="slds-float--left"> 
            <lightning:icon class="slds-show" aura:id="articleFour" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
            <lightning:icon class="slds-hide" aura:id="articleFour" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
        </div>
        <div class="slds-m-left--large">Withdrawn</div>
      </section>
    </div>
      
    <div aura:id="articleFour" class="slds-hide slds-p-around--medium">
        <c:dataTableACP_Withdrawn />
    </div>  
      
  </div>  
        
    </lightning:card>
</aura:component>

Here is my code. I have embedded four datatables inside this expandible collapsible component. But the search bar and pagination is coming only in the first component and dosent come in the rest 3 components. If i remove the first component, i automatically comes in the second component. I think the issue is jquery havinf conflict. I tried to remove the conflict by adding jQuery.noconflict() when the scripts are loaded, but not much luck.

Thanks.
Alain CabonAlain Cabon
Ok that is why is important to post the code because you are using your own components:  <c:DataTableACP />  <c:dataTableACP_Notstarted />​  and the problem is inside them but we cannot see their source codes so the help is impossible.