0

我试图在我的页面中使用 DataTables，由于某种原因，在浏览器中查看错误时出现“JQuery 未定义”错误。这是我的 HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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>

<head>
    <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 list to display.</i></div>
    </div>
  </div>

这是我的 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); 
}

有谁知道这里有什么问题？

4

1 回答 1

6

好像您没有包含 jQuery 库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-04-29T16:55:09.233 回答