TypeError: $ (…) .DataTable ไม่ใช่ฟังก์ชัน

Question 1

ฉันพยายามที่จะทำงานกับ jQuery ของ DataTable JS สำหรับโครงการของฉันจากนี้การเชื่อมโยง

ฉันดาวน์โหลดไลบรารีทั้งหมดจากแหล่งเดียวกัน ตัวอย่างทั้งหมดที่ให้ไว้ในแพ็กเกจดูเหมือนจะใช้งานได้ดี แต่เมื่อฉันพยายามรวมไว้ในWebFormsCSS, 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 เวอร์ชัน 1.7 หรือใหม่กว่าก่อนหน้านี้เพียงเวอร์ชันเดียว jQuery DataTables

ตัวอย่างเช่น:

<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

สิ่งนี้ได้ผลสำหรับฉัน แต่อย่าลืมโหลด jquery.js ก่อนไฟล์ dataTable.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">

javascript เพื่อเพิ่มปุ่มส่งออกบนตารางด้วย 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();

ภายในฟังก์ชัน jquery เรียกไฟล์ * .cshtml อื่นเป็น:

 $(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 ทั้งหมดในที่เดียวกันซึ่งช่วยแก้ปัญหาได้