In Datatables JQuery and Ajax, DataTable(…) is not a function

Question

I get the following error in my ASP.NET MVC project. There is a reference in the page to to the *.js file. I tried almost every solution on the internet for this problem, I could find.

From the source code of the page when it is loaded in the browser, it seems to be in correct order and loaded once:

<script src="/Scripts/old/Scripts/jquery-1.10.2.js"></script> <!-- I tried new and old jquery Version -->
<script src="/Scripts/bootstrap.js"></script>
<script src="/scripts/bootbox.js"></script>
<script src="/scripts/datatables/jquery.datatables.js"></script>
<script src="/scripts/datatables/datatables.bootstrap.js"></script>

The Code (index.cshtml):

$(document).ready(function() {
  $('#customers').DataTable()({
    ajax: {
      url: '/api/customers',
      dataSrc: ''
    },
    columns: [{
      data: "name",
      render: function(data, type, customer) {
        return "<a href='/customers/edit/" + customer.id + "'>" + customer.name + "</a>";
      }
    }, {
      data: "name"
    }, {
      data: "id",
      render: function(data) {
        return "<button class='btn-link js-delete' data-customer-id=" + data + ">Delete</button>";
      }
    }]
  });

  // More Code
});

The error, from the developer console of Chrome:

Customers:79 Uncaught TypeError: $(...).DataTable(...) is not a function
at HTMLDocument. (Customers:79)
at fire (jquery-1.10.2.js:3062)
at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)
at Function.ready (jquery-1.10.2.js:447)
at HTMLDocument.completed (jquery-1.10.2.js:118)

Any suggestions?

OK, solved . First comment was right.

$('#customers').DataTable({ instead of $('#customers').DataTable()({

Answer 1

You need to import those scripts before the Rendering scripts section.