Question

我正在努力让DataTables工作而不会抛出错误。

这是HTML：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">

    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>

</head>
<body>
    <div>
    <table width="100%" id="data-table" class="display dataTable">
        <thead>
            <tr>
                <th>Number</th>
                <th>Label</th>
                <th>Receiving</th>
                <th>Label</th>
                <th width="10%">Actions</th>
            </tr>
        </thead>
        <tbody>
            {section name=all loop=$companyNumbers}
            <tr id="row{$companyNumbers[all].ticid}">
                <td>{$companyNumbers[all].ticno}</td>
                <td>{$companyNumbers[all].ticlabel}</td>
                <td>{$companyNumbers[all].recno}</td>
                <td>{$companyNumbers[all].reclabel}</td>
                <td>
                    <a href="/editNumber/{$companyNumbers[all].ticid}" data="Edit Number {$companyNumbers[all].ticno}">
                            <i class="fa fa-edit fa-lg"></i>
                    </a>
                </td>
            </tr>
            {/section}
        </tbody>
    </table>
</div>
    <script type="text/javascript" src="/js/custom.js"></script>
</body>
</html>

custom.js文件如下：

$(document).ready(function() {

    // load data tables if element found
    if (document.getElementById('data-table')) {
        $('#data-table').dataTable({
            "paging":   false,
            "ordering": true,
            "searching": true,
            "info":     false
        } );
    }

});

当这个运行时，我可以看到一些东西（我假设它是DataTables在标记中添加一个空白DIV，如下所示，我看不到DataTables插入的常用代码：

<body>
    <div>
    <div></div><table width="100%" id="data-table" class="display dataTable no-footer">
    <thead>

我在控制台中收到以下错误：

Uncaught TypeError: undefined is not a function
jquery.dataTables.js:2786

我在DataTables常见问题解答中读到了这一行：

        $('#data-table').dataTable({

应该是：

        $('#data-table').DataTable({

但这没什么区别。

我已经尝试了所有我能想到的东西，但没有什么能解决这个问题。有什么想法吗？

Answer 1

原来这是jQuery的版本。我更改了本地托管版本：

<script type="text/javascript" src="/js/jquery.js"></script>

到CDN版本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

DataTables开始运作。

数据表添加空白DIV并抛出未捕获的TypeError：undefined不是函数

1 个答案: