Question

我花了两天时间寻找答案，虽然我遇到了很多答案但没有人帮助我。我正在构建一个带有标签的网站，在其中一个标签中，我现在加载了一个名为page2.html的html。

page2.html代码：

<!DOCTYPE html>
<html>
<head>
    <title>Positions</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
    <script src="sharedFunctions.js"></script>
    <script src="positions/page2.js"></script>

</head>
<body>

<button id="togglePositionForm" onclick="toggleForm('position',this.id)"></button>

<div id="createNewPositionForm" hidden>
    <form id="position" name="position" method="post" onsubmit="saveNewPosition()">
        <p class="ui-widget-header" id="newPostionHeader" >General Info</p>
            Position Name:  <input type="text" id="positionName" name="positionName" value="test1"><br>
            Entry Date:     <input type="text" id="datepicker" name="datepicker" ><br>
            Init Value:     <input type="text" id="initValue" name="initValue" value=""><br>
            Init Price:     <input type="text" id="initPrice" name="initPrice" value=""><br>
            Init Stop:      <input type="text" id="initStop" name="initStop" value=""><br>
            Current Price:  <input type="text" id="currentPrice" name="currentPrice" value=""><br>
            Current Value:  <input type="text" id="currentValue" name="currentValue" value=""><br>
            Gain/Loss(%):   <input type="text" id="gainLossInPerc" name="gainLossInPerc" value="Automatic Calc"><br>
            <input type="submit" value="submit">
    </form>
</div>

</br>
</br>
</br>
</br>



<table id="positionsSummeryTable">
     <thead>
     </thead>
     <tbody>

     </tbody>

</table>


</body>
</html>

我的index.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>


    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/jquery-ui.css" rel="stylesheet">
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.js"></script>

    <script src="index.js"></script>
</head>

<body>
<h1>Trader's Friend</h1>


<!-- Tabs -->
<div id="tabs">
    <ul>
        <li><a href="positions/page2.html">Positions</a></li>
        <li><a href="portfolios/page1.html">Portfolios</a></li>

        <li><a href="#tabs-1">Market Overview</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>



</body>
</html>

我还有一个带有document.ready函数的 page2.js ，其中包含此dataTables代码：

   $('#positionsSummeryTable').dataTable(
        {
            "aaData": [
                [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
                [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
                [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
                [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
                [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
                [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ]

            ],
            "aoColumns" : [
                {"sTitle" : "Position#"},
                {"sTitle" : "Name"},
                {"sTitle" : "Entry Date"},
                {"sTitle" : "Init Value"}

            ]


        }


    );

我正在使用wampserver在本地运行。

我的问题 ：在chrome和firefox中运行会出现同样的错误：

未捕获TypeError：对象[object Object]没有方法'dataTable'

我看到一些答案在谈论： 1.确保我在dataTables.js之前src jQuery.js 2.确保我实际上是src dataTables.js 3.确保我没有采购任何东西两次（例如jQuery.js） ...

我想我检查了所有这些情况，我的代码看起来很简单，但我找不到这个错误的原因。

有人知道如何解决这个问题吗？

提前致谢斯万

Answer 1

尝试将dataTables插件脚本调用从Page2.html移至Index.html

未捕获的TypeError：对象[object Object]没有方法'dataTable'

1 个答案: