Menu
I'm trying to get DataTables implemented on website form. I was experiencing some difficulties with that so I took a step back and tried to implement DataTables on a very basic table. The table I used came straight off of http://www.datatables.net/usage/. I then called in files I thought were needed but I'm still failing to get Datatables to work on even this basic of a table. What am I missing? Here's the "practice" code:
<script type="text/javascript" charset="utf-8" src="/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/media/js/jquery.dataTables.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="/media/src/DataTables.js"></script>-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#table').dataTable();
} );
</script>
<style type="text/css" title="currentStyle">
@import "/media/css/jquery.dataTables.css";
</style>
<title>Untitled Document</title>
</head>
<table id="table" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
<body>
</body>
</html>
Thanks!
628
Are the js and css files actually being loaded? You can debug that with firebug on firefox or in development tools in webkit browser. (just right click in the table and select "Inspect Element")
Also, DataTables is available on the Microsoft Ajax CDN. Same as jQuery
You can try to use the external link and see if it works. like this:
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
Also note that using external libraries is a good practice.
64
Check whether jQuery is loaded first. Then check whether dataTables assets are working. you can check that with an alert function Instead of using @import within your internal stylesheet, prefer using
<link rel="stylesheet" type="text/css" href="filepath/style.css">
In my blog, you can see steps and other options to use Datatables.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
