current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am trying to add more functionality to a table in my MVC application by using the jquery datatables plug-in. I have added the following to my index.cshtml page to try and turn the table 'dailyreporttable' from a standard table into a datatable:

<script src="~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#dailyreporttable').dataTable();
    });
</script>

However when I preview the page in the browser, the datatables plus in has not been applied to the table, and it remains as a standard table. I don't have any experience with MVC or web development so I am not sure what exactly I am doing wrong.

share|improve this question
    
Try switching your script references. The browser loads scripts in order, and jQuery needs to be referenced before jQuery plugins. –  Jason P May 13 at 13:34
add comment

4 Answers

up vote 1 down vote

You should be adding these references to your BundleConfig.cs file.

You will probably have a bundle being loaded in _Layout.cshtml:

@Scripts.Render("~/bundles/myBundle")

So add the jquery and datatables reference to that particular bundle, e.g:

bundles.Add(new ScriptBundle("~/bundles/myBundle").Include(
     "~/Scripts/jquery-1.10.2.min.js"
     "~/Scripts/DataTab....ataTables.js"
));

You can check that the js files are being loaded by looking the the Firebug Net tab (if you're using Firefox)

share|improve this answer
add comment
up vote 1 down vote

Do you have a reference to the css file?? rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"

share|improve this answer
    
Yeah i have added the reference to the CSS file but it still doesn't load –  Kevin May 15 at 8:20
add comment
up vote 0 down vote

try changing the order of script loading :

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/DataTab....ataTables.js" type="text/javascript"></script>

Because datatables jquery based plugin and it requires jquery methods to run, so you have to include jQuery library first so that all the required methods gets available to the datatable plugin.

share|improve this answer
    
Just tried that and the same thing is happening. Do I need to add references to the script elsewhere, such as the BundleConfig.cs file or _layout.cshtml file? this is my first time using scripts in MVC so I am not sure about what is the correct procedure. –  Kevin May 13 at 13:50
add comment
up vote 0 down vote 
<head>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#dailyreporttable').dataTable();
    });
</script>
</head>
<body>
<table id="dailyreporttable">
</table>
</body>

https://datatables.net/examples/basic_init/zero_configuration.html

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.