我參考datatables的寫法,但是一直跳出
jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
下面是我全部的link
不管我是使用本地端的
還是他網路上給的,都還是一直跳出同樣的訊息。
網站內部好像有人問過同樣問題,但是看起來是沒答案
求幫忙解答!
<link rel="shortcut icon" type="image/ico" href="https://www.datatables.net/favicon.ico">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css">
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/keytable/2.10.0/js/dataTables.keyTable.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
t type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
<table id="scrollSignTable" class="display" cellspacing="0" width:100%>
<thead>
<tr>
<th>UID</th>
<th>Sign Name</th>
<th>Stage</th>
<th>Price</th>
<th>CName</th>
</tr>
</thead>
</table>
const table = $('#scrollSignTable').DataTable({
ajax: '/api/sign',
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: 'uid' },
{ data: 'signname' },
{ data: 'stage' },
{ data: 'price' },
{ data: 'cname' }
],
paging: false,
searching: false,
scrollCollapse: true,
scrollY: '400px'
});
先確認看看const table = $('#scrollSignTable').DataTable({......})
這個script,是否放在引入datatables的script之後,因為datatables套件必須先載入。
通常套件引入放在head,自訂腳本會放在<body>
裡的最後,例如:
<head>
......
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="scrollSignTable" class="display" cellspacing="0" width:100%>
<thead>
<tr>
<th>UID</th>
<th>Sign Name</th>
<th>Stage</th>
<th>Price</th>
<th>CName</th>
</tr>
</thead>
</table>
<script>
const table = $('#scrollSignTable').DataTable();
</script>
</body>