在尝试创建内联数据表时，我不断遇到此错误。我什至尝试直接复制文档中的示例代码！下面给出的代码是工作数据表代码：<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 回答
繁花不似锦
TA贡献1851条经验 获得超4个赞
我发现我们不能使用$.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>
添加回答
举报
0/150
提交
取消