CODEWITHSUNDEEP
javascriptobjectmethodspropertiesdatatable
Pink Jazz
Pink Jazz

Reputation: 802

Object doesn't support property or method 'dataTable' error

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="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>

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

Does anyone know what the problem is now?

Upvotes: 0

Views: 16405

Answers (2)

BrianLegg
BrianLegg

Reputation: 1700

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.

Upvotes: 1

Developerzzz
Developerzzz

Reputation: 1126

You 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

Upvotes: 4

Related Questions