Object不支持属性或方法'dataTable'错误

时间:2013-04-29 17:20:09

标签: javascript object methods properties datatable

在我之前的问题上,我添加了JQuery库并修复了我的样式错误,但是,我现在收到一个新错误:“Object不支持属性或方法'dataTable'。

以下是我更新的HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <script type="text/javascript" src="/CensusDatabase/js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="/CensusDatabase/js/jquery.dataTables-1.9.4.min.js"></script>
        <script type="text/javascript" src="/CensusDatabase/js/DrawTable.js"></script>
        <title>My Census Data</title>
        <style type="text/css">
            body {
                color: black;
                background-color: #ffaacc;
                font-family:"Trebuchet MS", "Calibri", sans-serif
            }
            h1 {
                font-family:"Trebuchet MS", "Calibri", sans-serif
            }
        </style>
    </head>

    <body>
         <h1>My Census Data</h1>

        <div class="census">
            <div id="block-system-main">
                 <h2>Reports</h2>

                <ul>
                    <li><a href="#" onclick="nationalAgeGender()">National age and gender data</a>
                    </li>
                    <li><a href="#" onclick="arizonaAgeGender()">Arizona age and gender data</a>
                    </li>
                    <li><a href="#" onclick="combinedAgeGender()">Combined age and gender data</a>
                    </li>
                    <li><a href="#" onclick="nationalRace()">National race data</a>
                    </li>
                    <li><a href="#" onclick="arizonaRace()">Arizona race data</a>
                    </li>
                    <li><a href="#" onclick="combinedRace()">Combined race data</a>
                    </li>
                </ul>
                <div id="reportsData"><i>Please select a report to display.</i>
                </div>
            </div>
        </div>
    </body>
</html>

这是我的JavaScript代码,再次:

function nationalAgeGender() {
    (function ($) {
        $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
        $('#data-entry').dataTable({
            "bProcessing": true,
            "bScrollInfinite": true,
            "sScrollX": "160%",
            "bScrollCollapse": true,
            "bAutoWidth": false,
            "sScrollY": "100%",
            "iDisplayLength": -1,
            "sDom": '<"top">rt<"bottom">',
            "aaSorting": [],
            "sAjaxSource": "/CensusDatabase/database_scripts/NationalAgeGender.php",
            "aoColumns": [{
                    "sTitle": "Age group"
                }, {
                    "sTitle": "Total population (both genders)"
                }, {
                    "sTitle": "Male population"
                }, {
                    "sTitle": "Female population"
                }, {
                    "sTitle": "% (both genders)"
                }, {
                    "sTitle": "Male %"
                }, {
                    "sTitle": "Female %"
                }
            ]

        });
    })(jQuery);
}

function arizonaAgeGender() {
    (function ($) {
        $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
        $('#data-entry').dataTable({
            "bProcessing": true,
            "bScrollInfinite": true,
            "sScrollX": "160%",
            "bScrollCollapse": true,
            "bAutoWidth": false,
            "sScrollY": "100%",
            "iDisplayLength": -1,
            "sDom": '<"top">rt<"bottom">',
            "aaSorting": [],
            "sAjaxSource": "/CensusDatabase/database_scripts/ArizonaAgeGender.php",
            "aoColumns": [{
                    "sTitle": "Age group"
                }, {
                    "sTitle": "Total population (both genders)"
                }, {
                    "sTitle": "Male population"
                }, {
                    "sTitle": "Female population"
                }, {
                    "sTitle": "% (both genders)"
                }, {
                    "sTitle": "Male %"
                }, {
                    "sTitle": "Female %"
                }

            ]

        });
    })(jQuery);
}

function combinedAgeGender() {
    (function ($) {
        $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
        $('#data-entry').dataTable({
            "bProcessing": true,
            "bScrollInfinite": true,
            "sScrollX": "160%",
            "bScrollCollapse": true,
            "bAutoWidth": false,
            "sScrollY": "100%",
            "iDisplayLength": -1,
            "sDom": '<"top">rt<"bottom">',
            "aaSorting": [],
            "sAjaxSource": "/CensusDatabase/database_scripts/CombinedAgeGender.php",
            "aoColumns": [{
                    "sTitle": "Age group"
                }, {
                    "sTitle": "National total population (both genders)"
                }, {
                    "sTitle": "National male population"
                }, {
                    "sTitle": "National female population"
                }, {
                    "sTitle": "National % (both genders)"
                }, {
                    "sTitle": "National male %"
                }, {
                    "sTitle": "National female %"
                }, {
                    "sTitle": "Arizona total population (both genders)"
                }, {
                    "sTitle": "Arizona male population"
                }, {
                    "sTitle": "Arizona female population"
                }, {
                    "sTitle": "Arizona % (both genders)"
                }, {
                    "sTitle": "Arizona male %"
                }, {
                    "sTitle": "Arizona female %"
                }
            ]

        });
    })(jQuery);
}

function nationalRace() {
    (function ($) {
        $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
        $('#data-entry').dataTable({
            "bProcessing": true,
            "bScrollInfinite": true,
            "sScrollX": "160%",
            "bScrollCollapse": true,
            "bAutoWidth": false,
            "sScrollY": "100%",
            "iDisplayLength": -1,
            "sDom": '<"top">rt<"bottom">',
            "aaSorting": [],
            "sAjaxSource": "/CensusDatabase/database_scripts/NationalRace.php",
            "aoColumns": [{
                    "sTitle": "Category"
                }, {
                    "sTitle": "White"
                }, {
                    "sTitle": "White %"
                }, {
                    "sTitle": "Black or African-American"
                }, {
                    "sTitle": "Black or African-American %"
                }, {
                    "sTitle": "Native American"
                }, {
                    "sTitle": "Native American %"
                }, {
                    "sTitle": "Asian"
                }, {
                    "sTitle": "Asian %"
                }, {
                    "sTitle": "Native Hawaiian or Pacific Islander"
                }, {
                    "sTitle": "Native Hawaiian or Pacific Islander %"
                }, {
                    "sTitle": "Some other race"
                }, {
                    "sTitle": "Some other race %"
                }
            ]

        });
    })(jQuery);
}

function arizonaRace() {
    (function ($) {
        $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
        $('#data-entry').dataTable({
            "bProcessing": true,
            "bScrollInfinite": true,
            "sScrollX": "160%",
            "bScrollCollapse": true,
            "bAutoWidth": false,
            "sScrollY": "100%",
            "iDisplayLength": -1,
            "sDom": '<"top">rt<"bottom">',
            "aaSorting": [],
            "sAjaxSource": "/CensusDatabase/database_scripts/ArizonaRace.php",
            "aoColumns": [{
                    "sTitle": "Category"
                }, {
                    "sTitle": "White"
                }, {
                    "sTitle": "White %"
                }, {
                    "sTitle": "Black or African-American"
                }, {
                    "sTitle": "Black or African-American %"
                }, {
                    "sTitle": "Native American"
                }, {
                    "sTitle": "Native American %"
                }, {
                    "sTitle": "Asian"
                }, {
                    "sTitle": "Asian %"
                }, {
                    "sTitle": "Native Hawaiian or Pacific Islander"
                }, {
                    "sTitle": "Native Hawaiian or Pacific Islander %"
                }, {
                    "sTitle": "Some other race"
                }, {
                    "sTitle": "Some other race %"
                }
            ]

        });
    })(jQuery);
}

function combinedRace() {
    (function ($) {
        $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
        $('#data-entry').dataTable({
            "bProcessing": true,
            "bScrollInfinite": true,
            "sScrollX": "160%",
            "bScrollCollapse": true,
            "bAutoWidth": false,
            "sScrollY": "100%",
            "iDisplayLength": -1,
            "sDom": '<"top">rt<"bottom">',
            "aaSorting": [],
            "sAjaxSource": "/CensusDatabase/database_scripts/NationalRace.php",
            "aoColumns": [{
                    "sTitle": "Category"
                }, {
                    "sTitle": "White (National)"
                }, {
                    "sTitle": "White % (National)"
                }, {
                    "sTitle": "Black or African-American (National)"
                }, {
                    "sTitle": "Black or African-American % (National)"
                }, {
                    "sTitle": "Native American (National)"
                }, {
                    "sTitle": "Native American % (National)"
                }, {
                    "sTitle": "Asian (National)"
                }, {
                    "sTitle": "Asian % (National)"
                }, {
                    "sTitle": "Native Hawaiian or Pacific Islander (National)"
                }, {
                    "sTitle": "Native Hawaiian or Pacific Islander % (National)"
                }, {
                    "sTitle": "Some other race (National)"
                }, {
                    "sTitle": "Some other race % (National)"
                }, , {
                    "sTitle": "White (Arizona)"
                }, {
                    "sTitle": "White % (Arizona)"
                }, {
                    "sTitle": "Black or African-American (Arizona)"
                }, {
                    "sTitle": "Black or African-American % (Arizona)"
                }, {
                    "sTitle": "Native American (Arizona)"
                }, {
                    "sTitle": "Native American % (Arizona)"
                }, {
                    "sTitle": "Asian (Arizona)"
                }, {
                    "sTitle": "Asian % (Arizona)"
                }, {
                    "sTitle": "Native Hawaiian or Pacific Islander (Arizona)"
                }, {
                    "sTitle": "Native Hawaiian or Pacific Islander % (Arizona)"
                }, {
                    "sTitle": "Some other race (Arizona)"
                }, {
                    "sTitle": "Some other race % (Arizona)"
                }
            ]

        });
    })(jQuery);
}

有谁知道现在的问题是什么?

2 个答案:

答案 0 :(得分:4)

你的html代码中没有表格

                <table id="data-entry" class="display">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Skill name</th>
                        <th>Sklill Leverl</th>

                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

如果您使用的是jquery数据表插件,请访问以下链接以获取更多信息 jquery datatable

答案 1 :(得分:1)

我遇到了同样的问题,但在您的情况下,您似乎正在使用&#39; dataTable&#39;而不是&#39; DataTable&#39;。让我们知道您是如何解决问题的。