iT邦幫忙

0

DataTable is not a function

  • 分享至 

  • xImage

我參考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'
        });
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Zero皇
iT邦研究生 2 級 ‧ 2023-09-02 07:53:28

先確認看看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>
0
海綿寶寶
iT邦大神 1 級 ‧ 2023-09-02 08:48:54

原因可能是這篇提及的任何一點

懶得看的話
可以拿這篇去改

0
camabula
iT邦新手 3 級 ‧ 2023-09-04 14:54:31

live.datatables.net範例
可以線上改程式碼,隨即看到結果。

我要發表回答

立即登入回答