关于我之前的问题，我已经添加了 JQuery 库并修复了样式错误，但是，我现在收到一个新错误:“对象不支持属性或方法“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);
}
有谁知道现在的问题是什么吗？
最佳答案
您的 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
关于javascript - 对象不支持属性或方法 'dataTable'错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16284567/