On my previous question, I have added the JQuery library and have fixed my style errors, however, I am now getting a new error: "Object doesn't support property or method 'dataTable'.
Here is my updated HTML code:
<!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="binedAgeGender()">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="binedRace()">Combined race data</a>
</li>
</ul>
<div id="reportsData"><i>Please select a report to display.</i>
</div>
</div>
</div>
</body>
</html>
And here is my JavaScript code, again:
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 binedAgeGender() {
(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 binedRace() {
(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);
}
Does anyone know what the problem is now?
On my previous question, I have added the JQuery library and have fixed my style errors, however, I am now getting a new error: "Object doesn't support property or method 'dataTable'.
Here is my updated HTML code:
<!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="binedAgeGender()">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="binedRace()">Combined race data</a>
</li>
</ul>
<div id="reportsData"><i>Please select a report to display.</i>
</div>
</div>
</div>
</body>
</html>
And here is my JavaScript code, again:
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 binedAgeGender() {
(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 binedRace() {
(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);
}
Does anyone know what the problem is now?
Share Improve this question edited Apr 29, 2013 at 17:23 Ian 50.9k13 gold badges103 silver badges111 bronze badges asked Apr 29, 2013 at 17:20 Pink JazzPink Jazz 8025 gold badges14 silver badges37 bronze badges 3-
1
The file
CensusDatabase/js/jquery.dataTables-1.9.4.min.jsdoes not exist? – Niels Commented Apr 29, 2013 at 17:22 - Okay, I just changed it to jquery.dataTables.min.js. I am no longer getting the error, but the DataTable isn't displaying still. Do you happen to know what is going on? – Pink Jazz Commented Apr 29, 2013 at 17:25
- Dear @Niels the jquery.dataTables-1.9.4.min.js exist – Developerzzz Commented Apr 29, 2013 at 17:29
2 Answers
Reset to default 4You have no table in your html code
<table id="data-entry" class="display">
<thead>
<tr>
<th>ID</th>
<th>Skill name</th>
<th>Sklill Leverl</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
if you are using jquery data-table plugin the visit the following link for more information jquery datatable
I'm having the same issue, but in your case it looks like you were using 'dataTable' instead of 'DataTable'. Let us know how you fixed the problem.