이 링크 에서 내 프로젝트를 위해 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 DataTables 이후 에로드 됩니다.
- 여러 버전의 jQuery 라이브러리가로드됩니다.
해결책
jQuery DataTables 이전 버전의 jQuery 라이브러리 버전 1.7 이상 만 포함하십시오 .
예를 들면 :
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
이 오류 및 기타 일반적인 콘솔 오류에 대한 자세한 내용 은 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 -->
ASP.NET MVC를 사용하지 않아도 도움이되기를 바랍니다.
답변
어떤 이유로 두 버전의 jQuery가로드되는 경우 (권장되지 않음) $.noConflict(true)두 번째 버전에서 호출 하면 전역 범위의 jQuery 변수가 첫 번째 버전의 변수로 반환됩니다.
때때로 JQuery 파일의 이전 버전 (또는 안정적이지 않음)에 문제가있을 수 있습니다.
솔루션 사용 $.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>
답변
다음은 내보내기 테이블 플러그인이 완벽하게 작동하는 데 필요한 JS 및 CSS의 전체 세트입니다.
시간을 절약 할 수 있기를 바랍니다.
<!--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">
id = 테이블에 내보내기 버튼을 추가하는 자바 스크립트 tbl
$('#tbl').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
결과 :-
답변
이 오류에는 두 가지 이유가있을 수 있습니다.
먼저
당신은 그것을 위해 jQuery.DataTables.js전에 jquery.js그렇게하고 있습니다 :-
로드 jQuery.js하기 전에 로드 해야합니다.jQuery.DataTables.js
둘째
jQuery.js동일한 페이지에서의 두 가지 버전을 사용 하고 있습니다.
더 높은 버전을 사용하고 두 링크의 버전이 동일한 지 확인하십시오. jQuery
답변
솔직히이 문제를 해결하는 데 몇 시간이 걸렸습니다. 마지막으로 “Basheer AL-MOMANI”에서 제공 한 솔루션에 대한 재확인은 단 한 가지뿐입니다. 그것은 단지 진술을 넣는 것입니다
@RenderSection("scripts", required: false)
_Layout.cshtml모든 <script></script>요소 다음에 파일 내 에서 동일한 파일에 jquery 스크립트를 주석 처리합니다. 둘째, 추가해야했습니다
$.noConflict();
다른 * .cshtml 파일에서 jquery 함수를 다음과 같이 호출합니다.
$(document).readyfunction () {
$.noConflict();
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});
});
