TypeError: $("#myDataTable").dataTable is not a function ..plz help!!

suvo

there is a dropdown in my page .i am trying to fetch details using datatable.min js based on the id of the dropdown in asp.net mvc..i am getting this error .plz help..here is my js


$(document).ready(function () {
$('#ddlTitle').change(function () {
if ($("[id$='ddlTitle']").val() == 0) {
$("[id$='ddlTitle']").focus();
alert("Please select");
$('#CustomerDetails').html(" ");
return false;
}
$('#container').html("");
getData();
// $.ajax({
// type: "POST",
// contentType: "application/json; charset=utf-8",
// data: "{ CustomerID: '" + $('#ddlTitle').val() + "'}",
// url: "TestJqueryShowData.aspx/FetchCustomer",
// dataType: "json",
// success: function (data) {
// $('#CustomerDetails').html(" ");

// var Company = data.d;
// $('#CustomerDetails').append
// ('' + Company.CompanyName + "
" +
// Company.Address + "
" +
// Company.City + "
" +
// Company.Region + "
" +
// Company.PostalCode + "
" +
// Company.Country + "
" +
// Company.Phone + "
" +
// Company.Fax + "")
// }
// });
});



});

function getData() {
$("#container").css('display', 'block');
var oTable = $('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/AjaxHandler?id=" + $('#ddlTitle').val(),
"bProcessing": true,
"aoColumns": [
{ "sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return 'View';
}
},
{ "sName": "COMPANY_NAME" },
{ "sName": "ADDRESS" },
{ "sName": "TOWN" }
]
});

}


here is my view page




Dynamic DDL: @Html.DropDownList("ddlTitle", new SelectList((System.Collections.IEnumerable)ViewData["empList"], "employeeId", "employeeName"), new { @class = "ddlCSS" })






ID


Company name


Address


Town

allan

Have you run the DataTables debugger on your page? Also please provide a link.

Allan