jQuery Datatables plug-in not working with ASP.NET MVC

Question

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.

Try switching your script references. The browser loads scripts in order, and jQuery needs to be referenced before jQuery plugins. — Jason P
– Jason P, Commented May 13, 2014 at 13:34

markpsmith · Accepted Answer · 2014-05-13 14:02:38Z

1

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)

answered May 13, 2014 at 14:02

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PMC · Accepted Answer · 2014-05-14 14:11:20Z

1

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

answered May 14, 2014 at 14:11

PMC

461 bronze badge

1 Comment

Kevin Over a year ago

Yeah i have added the reference to the CSS file but it still doesn't load

Jai · Accepted Answer · 2014-05-13 13:36:31Z

0

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.

answered May 13, 2014 at 13:36

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Kevin Over a year ago

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.

malkam · Accepted Answer · 2014-05-13 14:08:54Z

0

<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

answered May 13, 2014 at 14:08

malkam

2,3551 gold badge18 silver badges19 bronze badges

Comments

Sujal Patel · Accepted Answer · 2019-11-04 14:43:28Z

0

$('#dailyreporttable').dataTable();

just move it out of the document.ready()

that seemed to do the trick for me,

another approach would be to use the ClientID

edited Nov 4, 2019 at 14:43

Sujal Patel

2,5402 gold badges21 silver badges40 bronze badges

answered Nov 4, 2019 at 13:48

LeArm

312 bronze badges

Collectives™ on Stack Overflow

jQuery Datatables plug-in not working with ASP.NET MVC

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related