Add jQuery DataTable to Asp.NET MVC 4 project

Question

I want add jQuery DataTable (http://www.datatables.net/) to my mvc4 site. But it's doesn't work. Doesn't show anything, table look like before adding script.

FireBug show an error:

TypeError: $(...).dataTable is not a function

**Admin_panel.cshtml**

@model IEnumerable<Rejestracja_imprez.Models.User>

@{
    Layout = "~/Views/Shared/_PanelAdmin.cshtml";
    ViewBag.Title = "Admin";
}

    <script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.dataTables.js" type="text/javascript"></script>
    <link href="~/Content/themes/base/jquery.dataTables.css" rel="stylesheet" type="text/css"/>

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


<table id="myDataTable">
....

In html page it's work good.

<html>
    <head>
        <style type="text/css" title="currentStyle">
            @import "../../media/css/jquery.dataTables.css";
        </style>
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#example').dataTable();
            } );
        </script>
    </head>

    <body >

<table id="example" >
...

Can you be more specific? In what way does it not work? How does the observed behavior differ from the expected behavior? When you do some debugging, what specifically is unexpected in the runtime values? — David
– David, Commented Apr 9, 2013 at 14:56
Table doesn't show anything, table look like before adding script. Nothing changed. FireBug show an error: TypeError: $(...).dataTable is not a function — user1031034
– user1031034, Commented Apr 9, 2013 at 15:09
According to that error, there is no function called dataTable on the jQuery object. Did the JavaScript file for that plugin get loaded? Did the JavaScript file for jQuery get loaded? (Probably, if it got to that function call.) Are there version conflicts between the two? Is that the correct usage of the plugin? You need to debug this in your browser. If you can show a live example of the problem we might be able to help identify what's wrong. — David
– David, Commented Apr 9, 2013 at 15:12
Is function called dataTable. I make a simple html page using this jQuery and it is working good. I update main post with html page where it's work good. — user1031034
– user1031034, Commented Apr 9, 2013 at 15:29
That was one of several potential issues. Have you confirmed that the JavaScript code is being loaded in the non-working version? Honestly, you have to do some debugging. Insisting that "it doesn't work" isn't getting anywhere. — David
– David, Commented Apr 9, 2013 at 15:31

user1031034 · Accepted Answer · 2013-04-09 17:04:25Z

5

Problem solved ;D

I add jQuery script to BundleConfig.cs in App_Start folder.

 **BundleConfig.cs**

 bundles.Add(new ScriptBundle("~/bundles/table").Include(
                        "~/Scripts/jquery.dataTables.js"));

 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        ............
                        "~/Content/themes/base/jquery.dataTables.css"));

In Admin_panel.cshtml I add:

**Admin_panel.cshtml**

@section Scripts {

    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/table")

    <script>
        $(document).ready(function () {
            $('#myDataTable').dataTable();
        });
        </script>

}

answered Apr 9, 2013 at 17:04

user1031034

8661 gold badge15 silver badges38 bronze badges

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

Comments

Felix Bayer · Accepted Answer · 2013-04-09 15:35:40Z

1

My guesses are...

Typo in file paths
Problem with the linked stylesheet in body of page (try rendering in head of master layout via section)
Order of loading resources into page
Something wrong/missing in additional layout page

Actually you're trying to call a method which doesn't exist at this time.

You could try referencing the files your razor view via generated path (i.e. @Url.Content("~/Scripts/jquery.dataTables.js"))

If this is not working you can try adding the files in sections and render this sections in layout page (at the appropriate part of the markup!).

answered Apr 9, 2013 at 15:35

Felix Bayer

3722 silver badges11 bronze badges

Collectives™ on Stack Overflow

Add jQuery DataTable to Asp.NET MVC 4 project

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related