Jquery plugin not getting applied

Question

I have added the plugin for html table to sort,paginate and search. I had 5 tables in a page. The plugin is not getting applied to the following table alone.What could be the issue here?

For clear understanding I have removed other tables in this page

<apex:page standardController="Account" extensions="NotesController" readOnly="true" showHeader="false" sidebar="false"  standardStylesheets="false" applyBodyTag="false" >
    <apex:slds />

    <!---Slds Styles--------------------------->


    <div class="slds .slds-grid">
        <div class="slds-grid slds-wrap">
            <body>

                <apex:pageMessages />
                <apex:form id="myForm">
                    <div id="container" style="float:left;width:80%">
                       <apex:commandButton action="{!ViewNotes}" value="Requirement" id="btnNote" style="{!(If(displayARText,'color:red;','color:black;'))}" status="loadStatus" rerender="myForm" styleClass="slds-button slds-button--neutral"/>
</div>
                   <c:LoadingBox />    
                  <div style="width:100%">
                      <div class="slds-scope">

                            <div style="width:100%" class="slds-grid slds-grid--vertical slds-m-vertical--small">
                                                   <apex:pageBlock title="Requirement" rendered="{!displayText}">
     <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
        <script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var contactTable = j$('[id$="NT1"]').DataTable({

                });
            });
        </script>
    </head>


                                    <table id="NT1" class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal">
                                      <thead>
                                            <tr class="slds-text-heading--label">
                                                <th scope="col" class="nobordertop" title="Order #">
                                                    <div>Note #</div>
                                                </th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <apex:repeat value="{!Text}" var="txt">
                                                <tr>
                                                    <td>
                                                        <div>
                                                            <apex:outputText value="{!txt}" escape="true" />
                                                        </div>
                                                    </td>
                                                </tr>

                                            </apex:repeat>
                                        </tbody>
                                    </table>





                                </apex:pageBlock>
                            </div>
                        </div>
                         </div>

                </apex:form>

            </body>
        </div>
    </div> 
</apex:page>

It might not matter but as its a HTML table, try changing your query filter from j$('[id$="NT1"]') to j$("NT1"), also check for any JavaScript errors in your browser's dev tools. — Rahul Sharma
– Rahul Sharma, Commented Jun 16, 2017 at 5:50

Avijit Chakraborty · Accepted Answer · 2017-06-16 14:17:31Z

This is working try to match with the order of the code. like head,body and script tags.

<apex:page controller="SampleTableController" sidebar="false" showHeader="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">
    <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
        <apex:slds />
    </head>
    <body>
        <div class="slds .slds-grid">
            <table id="table-1">
                <thead>
                    <th>Id</th>
                    <th>Name</th>
                </thead>
                <tbody>
                    <apex:repeat value="{!accList}" var="acc">
                    <tr>
                        <td>{!acc.Id}</td>
                        <td>{!acc.Name}</td>
                    </tr>
                    </apex:repeat>
                </tbody>
            </table>
        </div>
        <script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var contactTable = j$('[id$="table-1"]').DataTable({ 

                });
            });
        </script>
    </body>
</apex:page>

Stack Exchange Network

Jquery plugin not getting applied

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Jquery plugin not getting applied

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions