programing

유형 오류: $(...).DataTable이 함수가 아닙니다.

mailnote 2023. 4. 26. 23:33
반응형

유형 오류: $(...).DataTable이 함수가 아닙니다.

저는 이 링크에서 제 프로젝트를 위해 jQuery의 Dataatable 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

나는 여전히 여기에 동적 데이터를 바인딩하지 않았습니다(예: 리피터 내 등). 여전히 작동하지 않습니다.

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

원인

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

  • jQuery DataTables 라이브러리가 없습니다.
  • jQuery 데이터 테이블 뒤에 jQuery 라이브러리가 로드됩니다.
  • 여러 버전의 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 데이터 표 참조: 이 오류 및 기타 일반적인 콘솔 오류에 대한 자세한 내용을 보려면 일반 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를 두 번 참조한 것을 알게 되어 이 오류가 발생했습니다.

시간에서 ( page: 마스페에서지이첫터째_Layout.cshtmlASP(으)로 표시됩니다.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가), 어이유두권 jQuery경로우(jQuery가된않음드장), 호출을 합니다.$.noConflict(true)두 번째 버전에서 글로벌 범위의 jQuery 변수를 첫 번째 버전의 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">

- = javascript ID = 합니다.tbl

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

결과 :-

여기에 이미지 설명 입력

Laravel 프로젝트에서 DataTables로 작업할 때도 동일한 오류가 발생합니다.다음과 같은 해결 방법을 시도하더라도 오류는 여전히 남아 있습니다.

  1. jQuery가 포함되어 있는지 확인
  2. 데이터 테이블을 포함하기 전에 jQuery 포함
  3. jQuery 버전이 하나만 추가되었는지 확인

오류를 제거하려면 위의 조건이 충족되었는지 확인한 후 데이터 테이블이 포함된 태그에 "지연"을 추가합니다.예를들면,

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>

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

첫번째

은 로딩 중입니다.jQuery.DataTables.js 앞에jquery.js그래서 그것을 위해 :-

은 드해야합다를 해야 합니다.jQuery.js하기 jQuery.DataTables.js

둘째

의 의두가버사있습다니고용을 .jQuery.js같은 페이지에 있으므로 그것에 대해 :-

상위 버전을 사용하고 두 링크의 버전이 동일한지 확인합니다.jQuery

저는 여러 가지를 시도했지만, 제 해결책은 당신이 데이터 테이블을 포함한 HTML 스크립트 뒤에 "지연"을 추가하는 것이었습니다.

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>

솔직히, 이것을 고치는데 몇 시간이 걸렸습니다.마지막으로 "Basheer AL-MOMANI"가 제공하는 솔루션을 재확인하는 데 성공한 것은 단 한 가지였습니다.그것은 단지 진술을 덧붙이는 것입니다.

   @RenderSection("scripts", required: false)

에 내에_Layout.cshtml결국 철하다, 철하다, 철하다, 철하다, 철하다, 철하다 등<script></script>요소 및 동일한 파일에 있는 jquery 스크립트에 주석을 추가합니다.두 번째로, 저는 덧붙여야 했습니다.

 $.noConflict();

jquery 함수 내에서 다음과 같이 다른 *.cshtml 파일을 호출합니다.

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

        });

늦은 시간인 거 알아요. 구매는 누군가를 도울 수 있습니다.

추가하지 않을 경우에도 이 문제가 발생할 수 있습니다.$('#myTable').DataTable();에의 에.document.ready

그래서 이거 대신에.

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

사용해 보십시오.

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

데이터 테이블 jquery 라이브러리 참조에 delay를 추가했습니다.이제 그것은 저에게 효과가 있습니다.

<script src="~/Scripts/jquery.dataTables.min.js" defer></script>

저도 이 오류에 부딪혔습니다.내가 원래 암호화한 이유가 무엇이든 간에

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

이렇게 하면 오류가 발생하지 않을 수도 있고 다른 경우에는 오류가 발생하지 않을 수 있습니다.코드를 변경하여

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

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

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

플라스크에서 동일한 문제가 발생하여 JQuery, Popper 및 Bootstrap을 로드한 템플릿을 이미 가지고 있었습니다.저는 그 템플릿을 다른 템플릿으로 확장하고 있었습니다. 그 템플릿은 제가 테이블이 있는 페이지를 로드하기 위한 기초로 사용했습니다.

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

저는 JS CDN의 모든 가져오기를 같은 장소에서 실행하는 다른 템플릿을 만들어야 했습니다. 문제를 해결했습니다.

가끔 스크립트(데이터 테이블 초기화)가 일반 페이지 템플릿에 포함되어 있기 때문에 실제로 테이블이 없는 페이지 중 하나에서 데이터 테이블에 대한 jquery 관련 파일을 가져오지 않은 경우, 일반 초기화가 여전히 해당 파일을 찾고 있기 때문에 이 오류가 발생합니다. (이것은 제 경우였습니다.)

솔루션:그 전에 라이브러리의 존재를 확인하는 코드 내에서 데이터 테이블의 초기화를 래핑하는 것입니다.

여기 그것의 실질적인 예가 있습니다.

if (typeof jQuery.fn.DataTable != "undefined"){
    $('#accordionExample table').DataTable( {
        "pageLength": 5,
        "info": false,
        "order": [[ 1, "desc" ]]
    } );
}

DataTable 대신 DataTable을 작성하는 경우에도 이 문제가 발생할 수 있습니다(DataTable T는 대문자여야 함).이것은 초보자의 실수입니다.

$(document).ready(function() {
            $('#category-table').DataTable({
                // Your Code
            });

위에서 설명한 대로 스크립트를 정렬한 것이 확실하다면 DataTable 단어 대소문자가 올바른지 확인하십시오.

전에

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

끝나고

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

작은 것이 문제를 일으키고 있습니다, 제가 이것을 T로 바꾸었을 때 그것은 매력적으로 작동했습니다.

Nuget 패키지를 확인합니다.이 작업을 수행하려면 jQuery nuget 패키지를 제거해야 했습니다.

언급URL : https://stackoverflow.com/questions/31227844/typeerror-datatable-is-not-a-function

반응형

'programing' 카테고리의 다른 글

NSString에서 모든 공백 제거  (0) 2023.04.26
FileUpload 서버 컨트롤을 사용하지 않고 ASP.net 에서 파일 업로드  (0) 2023.04.26
ASP.NET Core CORS WebAPI: 액세스 제어-원산지 허용 헤더 없음  (0) 2023.04.26
특정 디렉터리의 디렉터리 수 계산  (0) 2023.04.26
범위.Chr(1)에 대해 바꾸기는 항상 참입니다.  (0) 2023.04.26

'programing'의 다른글

  • 현재글유형 오류: $(...).DataTable이 함수가 아닙니다.

관련글

댓글

티스토리툴바