I created a master by putting together various sections that repeat themselves in every page, I created a Head, Footer and menu section.
In the footer I put my scripts <script src
tags. I have a <script src
tag that contains a script that all the pages use, this script has a document.ready
function.
I want to use another script like in this case is a datatables script in the example of the page it shows the script like this
$(document).ready(function() {
$('#example').DataTable( {
scrollY: 300,
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true
} );
} );
I want to put that script inside a javascript file and put it at the end of the page and not in the master page footer section
because that script will only be used by one page, but since that script needs a document.ready
function, can I create two scripts with a document.ready
function? one before the other? what is the best practice to solve this?
Here is the script that is in all the pages
$(document).ready(function () {
$('#side-menu').metisMenu();
//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
$(function () {
$(window).bind("load resize", function () {
topOffset = 50;
width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
if (width < 768) {
$('div.navbar-collapse').addClass('collapse');
topOffset = 100; // 2-row-menu
} else {
$('div.navbar-collapse').removeClass('collapse');
}
height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
height = height - topOffset;
if (height < 1)
height = 1;
if (height > topOffset) {
$("#page-wrapper").css("min-height", (height) + "px");
}
});
var url = window.location;
var element = $('ul.nav a').filter(function () {
return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
element.addClass('active');
}
});