我正在使用.net和knockoutjs。我有一个Datatable通过ajax成功加载和填充数据。我看到的问题是当我尝试添加调用以使用更新的过滤器值重新加载数据时。当我调用一个包含DataTable（）。ajax.reload（）的函数时，我收到错误“Uncaught TypeError：$（...）。DataTable不是函数”
为什么表成功加载但以后对DataTables的任何调用都失败了？我以前做过类似的事情而且工作得很好，不确定到底发生了什么。
在下面的代码中，如果您找到过滤器功能，您将看到我在哪里得到错误。它不是ajax.reload调用本身失败的，它只是试图通过ID获取表并在其上执行.DataTable（）。
@{
ViewBag.Title = "Classrooms";
}
<div class="container" id="classrooms-div">
<h1>Classrooms</h1>
<div class="row">
<div class="col-md-2">
<a class="btn btn-primary" href="@Url.Action("Create", "Classroom")"><i class="fa fa-plus-circle"></i> Add Classroom</a>
</div>
</div>
<br />
<div id="filters" style="border: 1px solid black; padding: 10px;border-radius: 5px;width:400px;margin-bottom:20px;">
<div class="form-group row">
<label for="district" class="col-sm-2 col-form-label">District</label>
<div class="col-sm-10">
<select class="form-control adminfield" id="district" data-bind="options: districts, optionsValue: 'id', optionsText: 'value', optionsCaption: 'Select a District', value: selectedDistrict"></select>
</div>
</div>
<div class="form-group row">
<label for="school" class="col-sm-2 col-form-label">School</label>
<div class="col-sm-10">
<select class="form-control adminfield" id="school" data-bind="options: schools, optionsValue: 'id', optionsText: 'value', optionsCaption: 'Select a School', value: selectedSchool"></select>
</div>
</div>
<div class="form-group row">
<label for="conditions" class="col-sm-2 col-form-label">Research Condition</label>
<div class="col-sm-10">
<select class="form-control adminfield" id="conditions" data-bind="options: conditions, optionsValue: 'id', optionsText: 'value', optionsCaption: 'Select a Research Condition', value: selectedCondition"></select>
</div>
</div>
<button class="btn btn-primary" data-bind="click: filter">Filter</button>
</div>
<table class="table table-bordered table-hover" id="classrooms-table">
<thead>
<tr>
<th>Name</th>
<th>Grade</th>
<th>District</th>
<th>School</th>
<th>Begin Date</th>
<th>End Date</th>
<th></th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
var dashboardViewModel = function () {
var self = this;
self.classrooms = ko.observableArray();
self.schools = ko.observableArray();
self.districts = ko.observableArray();
self.researchConditions = ko.observableArray();
self.selectedSchool = ko.observable();
self.selectedDistrict = ko.observable();
self.selectedCondition = ko.observable();
//when the district changes, update the schools
self.selectedDistrict.subscribe(function (newValue) {
if(newValue != undefined && newValue != "")
{
//load the schools for this district
self.LoadSchoolsByDistrict(self.selectedDistrict());
}
});
self.LoadSchoolsByDistrict = function (district) {
showSpinner(true);
$.ajax({
url: '@Url.Action("LoadSchoolDropdownByDistrict", "School")',
type: 'POST',
data: { districtId: district },
success: function (response) {
showSpinner(false);
if (response.Success == true) {
self.schools(response.Entity);
}
else {
console.log(response.Message);
toastr.error(response.Message);
}
},
error: function (response) {
showSpinner(false);
toastr.error("Error while loading schools!");
console.log(response.Message);
}
});
};
self.LoadDistricts= function () {
showSpinner(true);
$.ajax({
url: '@Url.Action("LoadDistrictDropdown", "District")',
type: 'POST',
success: function (response) {
showSpinner(false);
if (response.Success == true) {
self.districts(response.Entity);
}
else {
console.log(response.Message);
toastr.error(response.Message);
}
},
error: function (response) {
showSpinner(false);
toastr.error("Error while loading districts!");
console.log(response.Message);
}
});
};
self.filter = function () {
var table = $('#classrooms-table').DataTable(); //THIS LINE FAILS HERE
table.ajax.reload();
};
self.loadInitialData = function () {
$('#classrooms-table').DataTable({
"processing": true,
"serverSide": true,
"order": [[0, "asc"]],
"iDisplayLength": 10,
"ajax": {
"url": '@Url.Action("LoadPagedClassrooms", "Classroom")',
"type": "POST",
"data": function (d, settings) {
d.district = self.selectedDistrict();
d.school = self.selectedSchool();
d.condition = self.selectedCondition();
}
},
"columns": [
{
"render": function (data, type, full, meta) {
var button1 = '<a title="Click to View Details" href="@Url.Action("Details","Classroom")/' + full.id + '?role=admin">' + full.name + '</a>';
return button1;
}, "sortable": true
},
{ "data": "grade" },
{ "data": "districtName" },
{ "data": "schoolName" },
{ "data": "beginDate" },
{ "data": "endDate" },
{
"render": function (data, type, full, meta)
{
var button1 = '<a title="Details" href="@Url.Action("Details","Classroom")/' + full.id + '"><i class="fa fa-list"></i></a>';
var button2 = '<a title="Edit" href="@Url.Action("Edit", "Classroom")/' + full.id + '"><i class="fa fa-pencil-square-o"></i></a>';
var button3 = '<a title="Delete" href="@Url.Action("Delete", "Classroom")/' + full.id + '"><i class="fa fa-trash-o"></i></a>';
return button1 + " | " + button2 + " | " + button3;
}, "sortable": false, "width": "65px"
},
]
});
}
};
var dashboardVM = new dashboardViewModel();
dashboardVM.loadInitialData();
dashboardVM.LoadDistricts();
ko.applyBindings(dashboardVM, $('#classrooms-div')[0]);
</script>
答案 0 :(得分：0)
出于某种原因，您没有使用var table = $('#classrooms-table').DataTable();
Object的原始init上的选项retrieve应该使它返回原始实例：
self.loadInitialData = function () {
$('#classrooms-table').DataTable({
"retrieve": true,
"processing": true,
...
答案 1 :(得分：0)
以下是我最终如何使用它。
self.loadInitialData = function () {
self.table = $('#classrooms-table').DataTable({
"retrieve": true,
"processing": true,
"serverSide": true,
"order": [[0, "asc"]],
"iDisplayLength": 10,
"ajax": {
"url": '@Url.Action("LoadPagedClassrooms", "Classroom")',
"type": "POST",
"data": function (d, settings) {
d.district = self.selectedDistrict();
d.school = self.selectedSchool();
d.condition = self.selectedCondition();
}
},
"columns": [
{
"render": function (data, type, full, meta) {
var button1 = '<a title="Click to View Details" href="@Url.Action("Details","Classroom")/' + full.id + '?role=admin">' + full.name + '</a>';
return button1;
}, "sortable": true
},
{ "data": "grade" },
{ "data": "districtName" },
{ "data": "schoolName" },
{ "data": "beginDate" },
{ "data": "endDate" },
{
"render": function (data, type, full, meta) {
var button1 = '<a title="Details" href="@Url.Action("Details","Classroom")/' + full.id + '"><i class="fa fa-list"></i></a>';
var button2 = '<a title="Edit" href="@Url.Action("Edit", "Classroom")/' + full.id + '"><i class="fa fa-pencil-square-o"></i></a>';
var button3 = '<a title="Delete" href="@Url.Action("Delete", "Classroom")/' + full.id + '"><i class="fa fa-trash-o"></i></a>';
return button1 + " | " + button2 + " | " + button3;
}, "sortable": false, "width": "65px"
},
]
});
};
self.filter = function () {
self.table.ajax.reload();
};