[SalesForce] Trying to use JavaScript file from static resource in VF Page is not working

We have uploaded the following in static resource as a zip file and used it in Visualforce page
as follows:

Old Tags

<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" />

After adding it to static resource

1st Method:

 <apex:includescript value="{!URLFOR($Resource.PaginationJS, 'js/jquery.dataTables.min.js')}"/>
    <apex:includescript value="{!URLFOR($Resource.PaginationJS, 'js/jquery-1.11.1.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.PaginationJS, 'css/jquery.dataTables.css')}"/>

2nd Method:

   <apex:includescript value="{!($Resource.PaginationJS, '/js/jquery.dataTables.min.js')}"/>
        <apex:includescript value="{!($Resource.PaginationJS, '/js/jquery-1.11.1.min.js')}"/>
        <apex:stylesheet value="{!($Resource.PaginationJS, '/css/jquery.dataTables.css')}"/>

3rd Method:

<script type="text/javascript" src="{!$Resource.PaginationJS}"></script>

None of the options above are working in Salesforce. Do we have any other options to do so?or is it a wrong tag?Need help

Best Answer

Load jQuery first, and then dataTable.

<apex:includescript value="{!($Resource.PaginationJS, '/js/jquery-1.11.1.min.js')}"/>
<apex:includescript value="{!($Resource.PaginationJS, '/js/jquery.dataTables.min.js')}"/>
<apex:stylesheet value="{!($Resource.PaginationJS, '/css/jquery.dataTables.css')}"/>

It is that, jQuery is a prerequisite for datatable plugin to work.

Or in other words, jQuery should first be loaded, only then the datatable would work, since datatable is a jQuery plugin.

Related Topic