我在ASP.Net中使用jQuery数据表编辑器。参考[here](https://editor.datatables.net/examples/simple/inTableControls.html)给出的示例,我按以下顺序包含了所有JS和CSS:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://editor.datatables.net/media/js/dataTables.editor.min.js"></script>
<script src="JS/data_table_edit_delete.js" type="text/javascript"></script>
<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://editor.datatables.net/media/css/dataTables.editor.min.css" rel="stylesheet" />
但我在这一行收到undefined is not a function
的错误:
editor = new $.fn.dataTable.Editor({
我在datatable编辑器示例中的上述链接中给出了相同的代码。我只是从C#rater获取数据而不是PHP。当我搜索时,我发现它可能找不到javascript引用。但我所用的只是那个例子。
data_table_edit_delete.js
文件中的我的js代码是:
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function () {
// console.log($.fn.dataTable.Editor);
// console.log($.fn.DataTable.Editor);
editor = new $.fn.dataTable.Editor({
"ajax": "data_table2.aspx/BindDatatable",
"table": "#example",
"fields": [{
"label": "User ID:",
"name": "UserId"
}, {
"label": "User Name:",
"name": "UserName"
}, {
"label": "Location:",
"name": "Location"
}]
});
// New record
$('a.editor_create').on('click', function (e) {
e.preventDefault();
editor.create({
title: 'Create new record',
buttons: 'Add'
});
});
// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit($(this).closest('tr'), {
title: 'Edit record',
buttons: 'Update'
});
});
// Delete a record
$('#example').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.remove($(this).closest('tr'), {
title: 'Delete record',
message: 'Are you sure you wish to remove this record?',
buttons: 'Delete'
});
});
$('#example').DataTable({
ajax: "data_table2.aspx/BindDatatable",
columns: [{
data: null,
render: function (data, type, row) {
// Combine the first and last names into a single table field
return data.first_name + ' ' + data.last_name;
}
}, {
data: "UserId"
}, {
data: "UserName"
}, {
data: "Location"
}, {
data: null,
className: "center",
defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
}]
});
});
感谢。