DataTable is not a function

mvc datatables

rain_yu 2023-09-01 16:02:38 ‧ 786 瀏覽

分享至

我參考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 }} |

直播中

3 個回答

Zero皇

iT邦研究生 3 級 ‧ 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>