Login

I am trying to work with jQuery's Datatable JS for my project from [this](

[To see links please register here]

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

</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 :

![File structure of JS and CSS in solution][1]

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

[1]:

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 ?

I got this error because I found out that I referenced jQuery twice.

The first time: on the master page (`_Layout.cshtml`) in ASP.NET MVC, and then again on one current page so I commented out the one on the master page.

If you are using ASP.NET MVC this snippet could help you

@*@Scripts.Render("~/bundles/jquery")*@//comment this line
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

and in the current page I added these lines

<script src="~/scripts/jquery-1.10.2.js"></script>


<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>


Hope this help you even if don't use ASP.NET MVC

There can be two reasons for that error:
---------------------------------------
**First**
---------
You are loding `jQuery.DataTables.js` before `jquery.js` so for that :-

*You need to load `jQuery.js` before you load `jQuery.DataTables.js`*
**Second**
----------
You are using two versions of `jQuery.js` on the same page so for that :-

*Try to use the higher version and make sure both links have same version of `jQuery`*

Here is the complete set of JS and CSS required for the export table plugin to work perfectly.

Hope it will save your time


<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


<script type="text/javascript" src="

[To see links please register here]

;
<script type="text/javascript" src="

[To see links please register here]

;


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>



<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

javascript to add export buttons on the table with id = `tbl`

$('#tbl').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});

Result :-

[![enter image description here][1]][1]

[1]:

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 some reason two versions of jQuery are loaded (which is not recommended), calling `$.noConflict(true)` from the second version will return the globally scoped jQuery variables to those of the first version.

Sometimes it could be issue with older version (or not stable) of JQuery files

Solution use `$.noConflict();`

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$('#myTable').DataTable();
});
// Code that uses other library's $ can follow here.
</script>

I know its late
Buy can help someone

This could also happen if you don't add `$('#myTable').DataTable();` inside the `document.ready`

So instead of this

`$('#myTable').DataTable();`

Try This

$(document).ready(function() {
$('#myTable').DataTable();
});

Honestly, this took hours to get this fixed. Finally only one thing worked a reconfirmation to solution provided by "Basheer AL-MOMANI". Which is just putting statement

@RenderSection("scripts", required: false)

within `_Layout.cshtml` file after all `<script></script>` elements and also commenting the jquery script in the same file. Secondly, I had to add

$.noConflict();

within jquery function call at another *.cshtml file as:

$(document).readyfunction () {
$.noConflict();
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});

});

### CAUSE ###

There could be multiple reasons for this error.

* jQuery DataTables library is missing.
* jQuery library is loaded **after** jQuery DataTables.
* Multiple versions of jQuery library is loaded.

### SOLUTION ###

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](

[To see links please register here]

) for more information on this and other common console errors.

I ran into this error also. For whatever reason I had originally coded

var table = $('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});

This would not throw the error sometimes and other times it would. By changing code to

$('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});

Error appears to have stopped

Blondelle568452

alorai

cirrate903042

Projoannaygijaarbj

overcloud549

deceivers475559

tarahzr

sleech539796

ciderkin264721

gauche234625