CODEWITHSUNDEEP
jqueryasp.net-mvc-4
bhard
bhard

Reputation: 94

MVC 4 Razor Object doesn't support property or method 'dataTable'

I'm a noob to MVC, jquery and DataTables. I get a Microsoft Visual Studio warning dialog when I hit F5 to build and bring up the site locally for development/debug:

JavaScript runtime error: Object doesn't support property or method 'dataTable'

I'm using VS 2012 with an MVC 4 project. I used the NuGet Package manager for my solution to install\update jQuery 1.8.3 and jquery.datatables 1.9.4. Here's my Index.cshtml view code:

<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript">     </script>
<script src="@Url.Content("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js")" type="text/javascript"></script>


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


<table id="table_id" class="display">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>
</tbody>
</table>

It seems like a referencing problem, but nothing I've tried resolves the problem!

I've searched through the blogs, but can't find the answer, or perhaps understand what needs to changed. A direct answer would be greatly appreciated!

Thanks!

Upvotes: 1

Views: 11933

Answers (3)

user2311808
user2311808

Reputation: 61

I think you may have a try to comment these lines out:

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

@RenderSection("scripts", required: false)

which are at the end of "_Layout.cshtml" page.

Hope it makes sense

Upvotes: 6

Dogoku
Dogoku

Reputation: 4675

Since you mention that you are a newbie (i dont like the word noob) in MVC and such, I assume that you declared jQuery in more than one Views (like you did above). I am providing an example layout for you code, if you wish to follow it

jQuery and any other libraries, should only be included in your html only once, ideally at the bottom of the page, just before the body closing tag

If at later point in your code, you are including jQuery again, then it will overwrite the previous one, which has the dataTable plugin attached to it

Best to check in an actual browser (chrome,firefox,IE) instead of Visual Studio. In Chrome, press F12 to bring up the Developer Tools, then press Esc to bring up the console. See any errors there?

An example layout for your code could look like this. This is the master view file (If i am not mistaken, by default its in Views > Shared > _Layout.cshtml)

<!DOCTYPE html>
<html>
    <head>
        ...

        <!-- Global Styles -->
        <link href="styles.css" rel="stylesheet" type="text/css" />
        <!-- Page Specific Styles -->
        @if (IsSectionDefined("Styles"))
        { 
            @RenderSection("Styles")
        }

        ...
    </head>
    <body>
        ...
        <!-- Global Scripts -->
        <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
        <!-- Page Specific Scripts -->
        @if (IsSectionDefined("Scripts"))
        { 
            @RenderSection("Scripts")
        }
    </body>
</html>

And you can add any specific styles/scripts you want to each view, like so

... 
<!-- View HTML -->
...

@section Styles {
       <link href="specific.css" />
}

@section Scripts {
    <script src="specific.js"></script>
}

Hope it helps

Upvotes: 4

Silagy
Silagy

Reputation: 3083

OK,

Remove the {} between the () of the datatable

write like this 

 $(document).ready(function () {
    $('#table_id').dataTable();
 });

Fiddle example

When you want to add options to the datatable you use the {} in order to consume the options

like this:

$(document).ready(function() {
$('#example').dataTable( {
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
   } );
} );

See example

Upvotes: 0

Related Questions