Basic Usage of TableTools example not working

Question

In my Visual Studio project, I copied the exact code here: http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html

I saved the two css files in my project as style1.css, style2.css.

I saved the three js files as script1.js, script2.js, script3.js.

Then, I had my custom.js file as:

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'T<"clear">lfrtip'
    } );
} );

Finally, my index.html looks like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <link rel="stylesheet" type="text/css" href="style2.css" />
    <script type="text/javascript" src="custom.js"></script>
    <script type="text/javascript" src="script1.js"></script>
    <script type="text/javascript" src="script2.js"></script>
    <script type="text/javascript" src="script3.js"></script>
</head>
<body>
    <!--inserted exact copy of html table-->
</body>

From what I understand, the code off that page should work as is. However, it doesn't seem to be working at all.

No formatting whatsoever
Cannot see the "copy", "csv"... buttons

How do I arrange all my files/code so that it works?

I am fairly new at this; any help is appreciated!

Oh, it says "Uncaught ReferenceError: $ is not defined". But I included jQuery? — user3923973

Papa Papa · Accepted Answer · 2014-08-13T01:02:13

You need to add a reference to jquery library and TableTools plugins. On the page that shows the example, under the Javascript section you will see text explaining that you need these three libraries.

Place this before your other js files.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.tableTools.js"></script>

Basic Usage of TableTools example not working

1 Answers