未捕获的 TypeError：this.each 不是函数
在尝试创建内联数据表时，我不断遇到此错误。我什至尝试直接复制文档中的示例代码！下面给出的代码是工作数据表代码：
<html>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
$('#example').DataTable( {
ajax: {url:'https://api.myjson.com/bins/gcx26',
crossDomain : true},
order: [[ 1, 'asc' ]],
columns: [
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
]
} );
} );
</script>
<body>
<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>
</body>
</html>
慕斯王1回答
-
繁花不似锦
我发现我们不能使用$.fn.dataTable-editor.Editor，正如@mplungjan 所说，它所做的只是从$fn.database. 相反，我们必须从网站本身下载一个依赖项：“Editor-1.9.2/js/dataTables.editor.js”。在本地下载文件后，可以运行代码。这是代码的新的和改进的工作版本：<!DOCTYPE html><html><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.20/b-1.6.1/sl-1.3.1/datatables.min.css"/><link rel="stylesheet" type="text/css" href="Editor-1.9.2/css/editor.dataTables.css"> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.20/b-1.6.1/sl-1.3.1/datatables.min.js"></script><script type="text/javascript" src="Editor-1.9.2/js/dataTables.editor.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script><script type="text/javascript" src="Editor-1.9.2/js/dataTables.editor.js"></script> <script type="text/javascript"> var editor; // use a global for the submit and return data rendering in the examples $(document).ready(function() { editor = new $.fn.dataTable.Editor( { ajax: {url:'https://api.myjson.com/bins/gcx26', crossDomain : true}, 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" } ] } ); // Activate an inline edit on click of a table cell $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) { editor.inline( this ); } ); $('#example').DataTable( { dom: "Bfrtip", ajax: {url:'https://api.myjson.com/bins/gcx26', crossDomain : true}, order: [[ 1, 'asc' ]], 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( ',', '.', 0, '$' ) } ], select: { style: 'os', selector: 'td:first-child' }, buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor } ] } );} ); </script><body><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></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript