Menu
I am trying to work with jQuery's Datatable JS for my project from this link.
I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to incorporate them in my WebForms,the CSS,JS do not work at all.
Here is what I have done :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<!-- table body -->
</tbody>
</table>
</div>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
</form>
</body>
</html>
My file structure for the JS and CSS in my Solution looks as follows :
I have added all the necessary JS and CSS references as shown in the manual. Still the rendering isn't as expected. There is no CSS and even the JS doesn't work.
Also in the console i get the following errors:
ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function
I have still not bound any dynamic data here (like within a repeater or so) still it is not working.
Can someone please guide me in the right direction for this problem ?
963
To solve the "$(...). DataTable is not a function" jQuery error, make sure to load the jQuery library before loading the DataTables library. The libraries have to be loaded only once on the page, otherwise the error is thrown.
This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.
There could be multiple reasons for this error.
Include only one version of jQuery library version 1.7 or newer before jQuery DataTables.
For example:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.
182
This worked for me. But make sure to load the jquery.js before the preferred dataTable.js file. Cheers!
<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>
<script>$(document).ready(function () {
$.noConflict();
var table = $('# your selector').DataTable();
});</script>
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
