2013-04-29 37 views
0

我想在我的頁面中使用DataTables,出於某種原因,在瀏覽器中查看錯誤時出現「JQuery未定義」錯誤。這是我的HTML代碼:JavaScript幫助 - JQuery未定義

<!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); 
} 

有誰知道這裏有什麼問題?

+2

,我不知道你實際上已經在該頁面包括jQuery的。 – j08691 2013-04-29 16:55:22

+0

我建議閱讀http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery。 – 2013-04-29 16:56:13

+0

您也錯過了''標籤。 – Pointy 2013-04-29 16:56:27

回答

6

看起來你不包括jQuery庫:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
+0

請注意,在使用jQuery的任何代碼之前,這需要**,而這對大家來說並不總是顯而易見的(也就是說,在頁面上包含兩個外部文件之前) – Ian 2013-04-29 16:58:22