TypeError: $ (…) .DataTable एक फ़ंक्शन नहीं है

Question 1

मैं इस लिंक से अपनी परियोजना के लिए jQuery के डेटाटेबल जेएस के साथ काम करने की कोशिश कर रहा हूं ।

मैंने उसी स्रोत से पूरी लाइब्रेरी डाउनलोड की। पैकेज में दिए गए सभी उदाहरण ठीक काम करने लगते हैं, लेकिन जब मैं उन्हें अपने में शामिल करने की कोशिश करता हूं WebForms, तो सीएसएस, जेएस बिल्कुल भी काम नहीं करते हैं।

यहाँ मैंने क्या किया है:

<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>

मेरे समाधान में जेएस और सीएसएस के लिए मेरी फाइल संरचना इस प्रकार है:

समाधान में जेएस और सीएसएस की फाइल संरचना

मैंने सभी आवश्यक जेएस और सीएसएस संदर्भों को जोड़ दिया है जैसा कि मैनुअल में दिखाया गया है। अभी भी प्रतिपादन उम्मीद के मुताबिक नहीं है। कोई CSS नहीं है और यहाँ तक कि JS काम नहीं करता है।

कंसोल में भी मुझे निम्न त्रुटियां मिलती हैं:

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

मैंने अभी भी यहां कोई डायनेमिक डेटा बाध्य नहीं किया है (जैसे कि एक पुनरावर्तक या तो) अभी भी यह काम नहीं कर रहा है।

क्या कोई मुझे इस समस्या के लिए सही दिशा में मार्गदर्शन कर सकता है?

Question 2

कारण

इस त्रुटि के कई कारण हो सकते हैं।

jQuery के डेटाटेबल्स लाइब्रेरी गायब है।
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 के डेटाटेबल्स देखें : इस और अन्य सामान्य कंसोल त्रुटियों के बारे में अधिक जानकारी के लिए सामान्य जावास्क्रिप्ट कंसोल त्रुटियाँ।

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">

आईडी के साथ तालिका पर निर्यात बटन जोड़ने के लिए जावास्क्रिप्ट = 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

ईमानदारी से, यह तय होने में घंटों लग गए। अंत में केवल एक चीज ने "बशीर अल-मोमानी" द्वारा प्रदान किए गए समाधान के लिए एक पुनर्संयोजन का काम किया। जो सिर्फ बयान दे रहा है

   @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

फ्लास्क में एक ही मुद्दा होने से, मेरे पास पहले से ही एक टेम्पलेट था जो JQuery, पॉपर और बूटस्ट्रैप को लोड करता था। मैं उस टेम्प्लेट को अन्य टेम्प्लेट में विस्तारित कर रहा था जिसे मैं उस आधार के रूप में उपयोग कर रहा था जो पृष्ठ था।

फ्लास्क में स्पष्ट रूप से किसी कारण के लिए पदानुक्रम में ऊपर की तालिकाओं में फ़ाइलों से पहले बाहरी टेम्प्लेट लोड की गई फाइलें (जिन्हें आप बढ़ा रहे हैं) इसलिए JQuery लोड हो रहा था इससे पहले कि डेटाटेबल्स फ़ाइल समस्या का कारण बन जाए।

मुझे एक और खाका तैयार करना था जहाँ मैं अपने सभी आयातों को उसी स्थान पर JS CDN से चलाता हूँ, जिससे समस्या हल हो गई।