如何解决我收到此错误-使用dataTable内联编辑功能时$ .fn.dataTable.Editor不是构造函数错误?
我正在尝试在dataTable中添加编辑行功能。 我已从dataTable官方文档-(https://editor.datatables.net/examples/inline-editing/submitData.html)中获得了参考。 但它显示了此错误-$ .fn.dataTable.Editor不是构造函数。
如何在dataTable中使用编辑行方法?
HTML:
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th width="18%">Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
JS:
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "./staff.php",table: "#example",fields: [ {
label: "First name:",name: "first_name"
},{
label: "Last name:",name: "last_name"
},{
label: "Position:",name: "position"
},{
label: "Office:",name: "office"
},{
label: "Extension:",name: "extn"
},{
label: "Start date:",name: "start_date",type: "datetime"
},{
label: "Salary:",name: "salary"
}
]
} );
$('#example').on( 'click','tbody td:not(:first-child)',function (e) {
editor.inline( this,{
submit: 'allIfChanged'
} );
} );
$('#example').DataTable( {
dom: "Bfrtip",ajax: "./staff.php",columns: [
{
data: null,defaultContent: '',className: 'select-checkbox',orderable: false
},{ data: "first_name" },{ data: "last_name" },{ data: "position" },{ data: "office" },{ data: "start_date" },{ data: "salary",render: $.fn.dataTable.render.number( ',','.','$' ) }
],order: [ 1,'asc' ],select: {
style: 'os',selector: 'td:first-child'
},buttons: [
{ extend: "create",editor: editor },{ extend: "edit",{ extend: "remove",editor: editor }
]
} );
} );
解决方法
您是否正在使用免费试用版中的文件? 确保您在试用期内购买了编辑器或获取新文件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。