CODEWITHSUNDEEP
javascripthtmljqueryasp.net-mvcdatatables
Jaswandi Lande
Jaswandi Lande

Reputation: 15

.datatable is not a function in jquery

Below is my jquery code to apply datatable property to HTML table.I've included following js. I'm getting Error in console that .datatable is not a function. If I replace jquery.min.js with latest version of js, I'm getting same error. It is trying to find .datatable function in jquery 2.1.0 js which I've included common layout file.Please advise.

  <script src="~/bootstrap-3.3.6-dist/js/jquery.min.js"></script>
  <script src="~/Scripts/jquery.dataTables.min.js"></script>
   <script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.js"></script>
   <script type="text/javascript">
   $(document).ready(function () {
    $("#dtTable").DataTable({
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        "pageLength": 5,
        "columns": []

    })
})

Upvotes: 0

Views: 1570

Answers (1)

David Liang
David Liang

Reputation: 21546

There are many problems in your code.

1. Duplicate jQuery

You need to remove <script src="~/bootstrap-3.3.6-dist/js/jquery.min.js"></script> because you said you included jQuery 2.1.0 in the common layout page.

Including jQuery twice can cause lots of troubles.

2. Duplicate DataTables scripts

You need to remove <script src="~/Scripts/jquery.dataTables.min.js"></script>.

If you plan to use the minified version, change its following <script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.js"></script> to <script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.min.js"></script>.

3. RenderSection()

I see your asp.net mvc tag. You need to make sure the jQuery script is loaded before your script placeholder:

<body>
    ...
    <script src="YOUR_JQUERY_PATH" />

    @Render.Section("scripts", required: false)
</body>

Then on the page where you want to have additional scripts, they need to be inside "scripts" section:

@{  
    ViewBag.Title = "YOUR_INDIVIDUAL_PAGE";  
}

<!-- YOUR HTML ELEMENTS -->

@section scripts
{
    <script src="YOUR_BOOTSTRAP_SCRIPT_PATH" />
    <script src="YOUR_DATATABLES_SCRIPT_PATH />

    <script type="text/javascript">
        $(function() {
            // Your other jQuery logics
        });
    </script>
}

I would move the Bootstrap script to the layout too, if you plan to use Bootstrap through out the entire site.


Optionally, you can use bundling and minification in ASP.NET MVC too: https://learn.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

Upvotes: 1

Related Questions