TypeError: $ (…) .ডাটা টেবিল কোনও ফাংশন নয়


91

আমি এই লিঙ্কটি থেকে আমার প্রকল্পের জন্য 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>

আমার সলিউশনে জেএস এবং সিএসএসের জন্য আমার ফাইলের কাঠামোটি নীচের মত দেখাচ্ছে:

সমাধানে জেএস এবং সিএসএসের ফাইল কাঠামো

ম্যানুয়ালটিতে বর্ণিত সমস্ত প্রয়োজনীয় জেএস এবং সিএসএসের রেফারেন্স আমি যুক্ত করেছি। এখনও রেন্ডারিং আশানুরূপ নয়। কোনও সিএসএস নেই এমনকি জেএসও কাজ করে না।

কনসোলেও আমি নিম্নলিখিত ত্রুটিগুলি পেয়েছি:

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

আমি এখনও এখানে কোনও গতিশীল ডেটা আবদ্ধ করি নি (যেমন একটি রিপিটারের মধ্যে বা তাই) এখনও এটি কাজ করছে না।

এই সমস্যার জন্য কেউ দয়া করে আমাকে সঠিক দিকনির্দেশনা দিতে পারেন?


আমি যে কোডটি লিখেছি তা পুরোপুরি ঠিক ছিল, তবে আমিও একই ত্রুটি পেয়েছি। দীর্ঘ বিশ্লেষণের পরে, আমি আমার পিসিটি আবার শুরু করেছি কারণ আমি গত 7 দিন থেকে পুনরায় আরম্ভ করি নি। তারপরে, আমার কোড কাজ করা শুরু করে।
অশোক কুমার

@ আশোককুমার: আপনি সম্ভবত ভাগ্যবান!
অভিষেক ঘোষ

উত্তর:


134

কারণ

এই ত্রুটির জন্য একাধিক কারণ থাকতে পারে।

  • jQuery DataTables লাইব্রেরি অনুপস্থিত।
  • jQuery লাইব্রেরি jQuery ডেটা টেবিল পরে লোড করা হয়
  • 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 ডেটা টেবিলগুলি দেখুন : এটি এবং অন্যান্য সাধারণ কনসোল ত্রুটি সম্পর্কিত আরও তথ্যের জন্য সাধারণ জাভাস্ক্রিপ্ট কনসোল ত্রুটি।


46

এটি আমার পক্ষে কাজ করেছে। তবে পছন্দের ডেটা টেবিল.জেএস ফাইলের আগে 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>

8
পদ্ধতিটিতে $ .noConflict () কলটি আমার জন্য মূল বিষয় ছিল। ধন্যবাদ
jrebs

37

আমি এই ত্রুটিটি পেয়েছি কারণ আমি জানতে পেরেছি যে আমি দুবার jQuery উল্লেখ করেছি।

প্রথমবার: _Layout.cshtmlএএসপি.নেট এমভিসি- তে মাস্টার পৃষ্ঠায় ( ) এবং তারপরে আবার একটি বর্তমান পৃষ্ঠায় তাই আমি মাস্টার পৃষ্ঠায় একটি মন্তব্য করেছি।

আপনি যদি এএসপি.নেট এমভিসি ব্যবহার করেন তবে এই স্নিপেটটি আপনাকে সহায়তা করতে পারে

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

আশা করি এএসপি.নেট এমভিসি না ব্যবহার করলেও এটি আপনাকে সহায়তা করবে


প্রকৃতপক্ষে, আমি _ লেআউটসিএইচটিএমএল এর মধ্যে jquery.min.js মন্তব্য করেছি। যাইহোক, আমার পক্ষে যা কাজ করেছে তা হ'ল সমস্ত রেকর্ডস> </ স্ক্রিপ্টস> উপাদানগুলির পরে নীচে নীচে @RenderSication ("স্ক্রিপ্টস", প্রয়োজনীয়: মিথ্যা) রাখছে।
মুহাম্মাদ তাইয়েব

অনেক ধন্যবাদ, আপনার উত্তরটি jquery ডেটাবেবল ইনস্টল এবং পুনরায় ইনস্টল করার 4 ঘন্টা শেষ হয়েছিল! যদিও আমার একটি প্রশ্ন আছে: আমার যদি _Layout.cshtML এ jQuery প্রয়োজন হয় এবং myView.cshtML এ প্রয়োজনীয় ডেটাবেবলগুলি দরকার, তবে আমার ভিউ.সি.এইচটিএমএলতে jQuery উল্লেখ না করায় আমি কী করব যে "jQuery সংজ্ঞায়িত নয়"?
হামজা ডাহমৌন

19

যদি কোনও কারণে 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>

আমার টেম্প্লেটিং ইঞ্জিন হিসাবে ব্লেডের সাথে ল্যারাভেলের সাথে জ্যাকুরি ব্যবহার করে ... অবাক করা বিষয় এটিই আমার পক্ষে কাজ করেছিল - অবশ্যই আপনি বিকাশকারীদের জানেন ... যখন এটি কাজ করে আপনি অনুসন্ধান বন্ধ করেন!
ডানিয়েল ওয়ারুই

noConflict () আমার পক্ষে কাজ করেছিল। আমার ধারণা আমি jQuery এর অন্য কিছু সংস্করণ ইনস্টল করা আছে।
হারুন

10

এক্সপোর্ট টেবিল প্লাগইনটি পুরোপুরিভাবে কাজ করতে প্রয়োজনীয় জেএস এবং সিএসএসের সম্পূর্ণ সেট এখানে রয়েছে।

আশা করি এটি আপনার সময় সাশ্রয় করবে

   <!--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'
                        ]
                    });

ফলাফল :-

এখানে চিত্র বর্ণনা লিখুন


আমি "এক্সপোর্ট টেবিল বোতাম" স্ক্রিপ্ট কল ছাড়াই এটি করতে সক্ষম হয়েছি। ভাল জিনিস.
চিহ্নিত করুন

7

এই ত্রুটির জন্য দুটি কারণ থাকতে পারে:

প্রথম

আপনি তার জন্য jQuery.DataTables.jsআগে থাকছেন jquery.js: -

লোড jQuery.jsকরার আগে আপনাকে লোড করা দরকারjQuery.DataTables.js

দ্বিতীয়

আপনি jQuery.jsএকই পৃষ্ঠায় দুটি সংস্করণ ব্যবহার করছেন যাতে এর জন্য: -

উচ্চতর সংস্করণটি ব্যবহার করার চেষ্টা করুন এবং নিশ্চিত করুন যে উভয় লিঙ্কের একই সংস্করণ রয়েছে jQuery


"টাইপএররার: $ (…) .ডাটা টেবিল কোনও ফাংশন নয়" যেহেতু ডেটাবেবলগুলি আপনার নিজের ডাউনলোড বিল্ডার চয়ন করতে শুরু করে তা হ'ল আপনি ডাউনলোডে জ্যাকোয়ারি নির্বাচন করেন তবে এটি ইতিমধ্যে আপনার পৃষ্ঠাতে রয়েছে।
ভোম্ব্যাটকে জয়যুক্ত

কেবল পরিষ্কার করার জন্য - এই ত্রুটিটি অন্য উত্স থেকেও ছুঁড়ে দেওয়া হয়েছে। আমি তাদের সঠিক ক্রমে পেয়েছিলাম এবং দুটি jQuerys ব্যবহার করছিলাম না। অন্য কোনও দরিদ্র আত্মার সাথে যদি আসে .... তবে এটি কাজ করে যখন
ডেটা টেবিলগুলি

3

সত্য, এই স্থির হতে কয়েক ঘন্টা সময় লেগেছিল। অবশেষে কেবলমাত্র একটি জিনিস "বশির আল-মোমানী" দ্বারা সরবরাহিত সমাধানটির পুনর্নির্মাণের কাজ করেছে। যা কেবল বিবৃতি দিচ্ছে

   @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,
          });

        });

1

আমি এই ত্রুটি মধ্যে দৌড়ে। যে কারণেই আমি মূলত কোড করেছিলাম ed

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

এটি ত্রুটিটি কখনও কখনও এবং কখনও কখনও ফেলবে না। কোড পরিবর্তন করে

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

ত্রুটি বন্ধ হয়ে গেছে বলে মনে হচ্ছে


0

আমি জানি এর দেরী কেনা কাউকে সাহায্য করতে পারে

আপনি যদি এর $('#myTable').DataTable();অভ্যন্তরে যোগ না করেন তবে এটিও ঘটতে পারেdocument.ready

সুতরাং এটি পরিবর্তে

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

এটা চেষ্টা কর

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

0

আমার ক্ষেত্রে সমাধানটি ছিল ব্রাউজার থেকে কুকিজ মুছে ফেলা।


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

0

ফ্লাস্কে একই সমস্যা থাকার পরে, আমার কাছে ইতিমধ্যে একটি টেম্পলেট ছিল যা জিকুয়ারি, পপার এবং বুটস্ট্র্যাপ লোড করেছে। আমি সেই টেম্পলেটটি অন্য টেম্পলেটটিতে প্রসারিত করছিলাম যা আমি টেবিলযুক্ত পৃষ্ঠাটি লোড করার জন্য বেস হিসাবে ব্যবহার করছিলাম।

ফ্ল্যাস্কের কোনও কারণে স্পষ্টতই বাইরের টেমপ্লেটের লোডগুলি হায়ারার্কিতে উপরের টেবিলগুলিতে ফাইলগুলির আগে লোড করা হয় (যেগুলি আপনি প্রসারিত করছেন) তাই জিকুয়েরি সমস্যা তৈরির জন্য ডেটা টেবিল ফাইলগুলির আগে লোড করছিল।

আমাকে অন্য একটি টেম্পলেট তৈরি করতে হয়েছিল যেখানে আমি আমার জেএস সিডিএনগুলির সমস্ত আমদানি একই জায়গায় চালিত করেছি, এটি সমস্যার সমাধান করেছে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.