TypeError : $ (…) .DataTable은 함수가 아닙니다.
이 링크 에서 내 프로젝트를 위해 jQuery의 Datatable JS로 작업하려고합니다 .
동일한 소스에서 전체 라이브러리를 다운로드했습니다. 패키지에 제공된 모든 예제가 제대로 작동하는 것 같지만 내 WebForms, CSS, JS 에 통합하려고하면 전혀 작동 하지 않습니다 .
내가 한 일은 다음과 같습니다.
<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>
내 솔루션의 JS 및 CSS에 대한 내 파일 구조는 다음과 같습니다.
매뉴얼에 표시된대로 필요한 모든 JS 및 CSS 참조를 추가했습니다. 그래도 렌더링이 예상과 다릅니다. CSS가없고 JS도 작동하지 않습니다.
또한 콘솔에서 다음 오류가 발생합니다.
ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function
여전히 여기에 동적 데이터를 바인딩하지 않았습니다 (리피터 등) 여전히 작동하지 않습니다.
누군가이 문제에 대한 올바른 방향으로 나를 안내해 주시겠습니까?
jQuery DataTables와 같은 jQuery 관련 코드를로드 하기 전에 jQuery를로드해야 합니다. 아래를 참조하십시오.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
또한 프로덕션 버전의 경우 축소 된 버전을로드하는 것이 좋습니다 ( .min.js대신으로 끝남 ).
이 오류 및 기타 일반적인 콘솔 오류에 대한 자세한 내용 은 jQuery DataTables : 일반적인 JavaScript 콘솔 오류 를 참조하세요.
이것은 나를 위해 일했습니다. 그러나 선호하는 dataTable.js 파일보다 먼저 jquery.js를로드해야합니다. 건배!
<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>
jQuery를 두 번 참조했음을 알았 기 때문에이 오류가 발생했습니다.
처음 _Layout.cshtml에는 ASP.NET MVC 의 마스터 페이지 ( )에서, 그리고 다시 현재 페이지에서 다시 마스터 페이지에 주석을 달았습니다.
ASP.NET MVC를 사용하는 경우이 스 니펫이 도움이 될 수 있습니다.
@*@Scripts.Render("~/bundles/jquery")*@//comment this line
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
그리고 현재 페이지에서이 줄을 추가했습니다
<script src="~/scripts/jquery-1.10.2.js"></script>
<!-- #region datatables files -->
<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>
<!-- #endregion -->
Hope this help you even if don't use ASP.NET MVC
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>
Here is the complete set of JS and CSS required for the export table plugin to work perfectly.
Hope it will save your time
<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<!--Export table buttons-->
<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>
<!--Export table button CSS-->
<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 :-
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 :-
더 높은 버전을 사용하고 두 링크의 버전이 동일한 지 확인하십시오. jQuery
나는 그것의 늦은 구매가 누군가를 도울 수 있다는 것을 안다.
$('#myTable').DataTable();내부에 추가하지 않은 경우에도 발생할 수 있습니다 .document.ready
그래서이 대신
$('#myTable').DataTable();
이 시도
$(document).ready(function() {
$('#myTable').DataTable();
});
참고 URL : https://stackoverflow.com/questions/31227844/typeerror-datatable-is-not-a-function
'Nice programing' 카테고리의 다른 글
| 비공개 github 저장소에서 가져올 gem을 어떻게 지정할 수 있나요? (0) | 2020.12.06 |
|---|---|
| 목록의 새 전체 복사본 (복제본)을 만드는 방법 (0) | 2020.12.06 |
| 오류 1053 : 서비스가 시작 또는 제어 요청에 적시에 응답하지 않았습니다. (0) | 2020.12.06 |
| Response.Cookies보다 Request.Cookies를 언제 사용합니까? (0) | 2020.12.06 |
| 유효하지 않은 이메일 주소를 찾기위한 SQL 스크립트 (0) | 2020.12.06 |