TypeError : $ (…) .DataTable은 함수가 아닙니다.

Question 1

이 링크 에서 내 프로젝트를 위해 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 파일 구조

매뉴얼에 표시된대로 필요한 모든 JS 및 CSS 참조를 추가했습니다. 그래도 렌더링이 예상과 다릅니다. CSS가없고 JS도 작동하지 않습니다.

또한 콘솔에서 다음 오류가 발생합니다.

ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function

여전히 여기에 동적 데이터를 바인딩하지 않았습니다 (리피터 내에서와 같이) 여전히 작동하지 않습니다.

누군가이 문제에 대한 올바른 방향으로 나를 안내해 주시겠습니까?

Question 2

원인

이 오류에는 여러 가지 이유가있을 수 있습니다.

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 콘솔 오류 를 참조하세요.

Question 3

이것은 나를 위해 일했습니다. 그러나 선호하는 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>

Question 4

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를 사용하지 않아도 도움이되기를 바랍니다.

Question 5

어떤 이유로 두 버전의 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>

Question 6

다음은 내보내기 테이블 플러그인이 완벽하게 작동하는 데 필요한 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'
                        ]
                    });

결과 :-

Question 7

이 오류에는 두 가지 이유가있을 수 있습니다.

먼저

당신은 그것을 위해 jQuery.DataTables.js전에 jquery.js그렇게하고 있습니다 :-

로드 jQuery.js하기 전에 로드 해야합니다.jQuery.DataTables.js

둘째

jQuery.js동일한 페이지에서의 두 가지 버전을 사용 하고 있습니다.

더 높은 버전을 사용하고 두 링크의 버전이 동일한 지 확인하십시오. jQuery

Question 8

솔직히이 문제를 해결하는 데 몇 시간이 걸렸습니다. 마지막으로 "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,
          });

        });

Question 9

이 오류도 발생했습니다. 어떤 이유로 든 내가 원래 코딩했던

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

이것은 때때로 오류가 발생하지 않으며 다른 경우에는 발생합니다. 코드를 다음으로 변경하여

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

오류가 중지 된 것 같습니다.

Question 10

나는 그것의 늦은 구매가 누군가를 도울 수 있다는 것을 안다.

$('#myTable').DataTable();내부에 추가하지 않은 경우에도 발생할 수 있습니다 .document.ready

그래서이 대신

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

이 시도

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

Question 11

제 경우 해결책은 브라우저에서 쿠키를 삭제하는 것이 었습니다.

Question 12

// you can get the Jquery's librairies online with adding  those two rows in your page

 <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

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

Question 13

Flask에서 동일한 문제가 발생하여 JQuery, Popper 및 Bootstrap을로드 한 템플릿이 이미 있습니다. 이 템플릿을 테이블이있는 페이지를로드하기 위해 기본으로 사용하던 다른 템플릿으로 확장했습니다.

어떤 이유로 Flask에서 외부 템플릿의 파일은 계층 구조의 위 테이블에있는 파일 (확장중인 파일)보다 먼저로드되므로 JQuery가 문제를 일으키는 DataTables 파일보다 먼저로드되었습니다.

모든 JS CDN 가져 오기를 동일한 위치에서 실행하는 또 다른 템플릿을 만들어야 문제가 해결되었습니다.