Datatables: undefined öğesinin 'mData' özelliği okunamıyor

İle ilgili bir sorunum var Datatables. Ben de sonuç vermeyen bu bağlantıdan geçtim . Verileri doğrudan DOM'a ayrıştırdığım tüm önkoşulları ekledim. Lütfen bu sorunu düzeltmeme yardımcı olun.

Senaryo

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});

FYI dataTables iyi biçimlendirilmiş bir tablo gerektirir. İçermeli <thead>ve <tbody>etiketlemelidir, aksi halde bu hatayı atar. Ayrıca, başlık satırı da dahil olmak üzere tüm satırlarınızın aynı sayıda sütuna sahip olduğundan emin olun.

Aşağıdaki hata verir (no <thead>ve <tbody>etiketleri)

<table id="sample-table">
    <tr>
        <th>title-1</th>
        <th>title-2</th>
    </tr>
    <tr>
        <td>data-1</td>
        <td>data-2</td>
    </tr>
</table>

Aşağıdakiler de bir hata verir (eşit olmayan sütun sayısı)

<table id="sample-table">
    <thead>
        <tr>
            <th>title-1</th>
            <th>title-2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

Daha fazla bilgi için burayı okuyun

Bunun yaygın bir nedeni Cannot read property 'fnSetData' of undefined, bu hatalı koddaki gibi uyuşmayan sütun sayısıdır:

<thead>                 <!-- thead required -->
    <tr>                <!-- tr required -->
        <th>Rep</th>    <!-- td instead of th will also work -->
        <th>Titel</th>
                        <!-- th missing here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>
        <td>Titel</td>
        <td>Missing corresponding th</td>
    </tr>
</tbody>

Aşağıdaki kod başına bir tane<th><td> ile (sütun sayısı eşleşmelidir) çalışırken :

<thead>
    <tr>
        <th>Rep</th>       <!-- 1st column -->
        <th>Titel</th>     <!-- 2nd column -->
        <th>Added th</th>  <!-- 3rd column; th added here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>             <!-- 1st column -->
        <td>Titel</td>           <!-- 2nd column -->
        <td>th now present</td>  <!-- 3rd column -->
    </tr>
</tbody>

Hata, colspan ile ikinci bir satır olmadan iyi biçimlendirilmiş bir parça kullanıldığında da ortaya çıkar.

7 sütunlu bir tablo için aşağıdakiler çalışmaz ve javascript konsolunda "undefined 'mData' özelliği okunamıyor" ifadesini görüyoruz:

<thead>
    <tr>
        <th>Rep</th>
        <th>Titel</th>
        <th colspan="5">Download</th>
    </tr>
</thead>

Bu çalışırken:

<thead>
    <tr>
        <th rowspan="2">Rep</th>
        <th rowspan="2">Titel</th>
        <th colspan="5">Download</th>
    </tr>
    <tr>
        <th>pdf</th>
        <th>nwc</th>
        <th>nwctxt</th>
        <th>mid</th>
        <th>xml</th>
    </tr>
</thead>

Aynı sorunu, iskele jeneratörü ile oluşturulan bir Rails görünümünde DOM verilerini kullanarak da yaşadım. Varsayılan olarak görünüm <th>, son üç sütun (kayıtları göstermek, gizlemek ve yok etmek için bağlantılar içeren) öğeleri atlar . Ben bir <th>öğe içinde bu sütunlar için başlıklar eklediyseniz içinde <thead>sorunu düzeltti bulundu.

Ben senin html göremiyorum çünkü bu aynı sorun olup olmadığını söyleyemem. Aynı sorun değilse, konsoldaki hatayı (sizi başarısız olduğu koda götürecek) tıklayarak ve ardından bir koşul ekleyerek hangi sütunun hata verdiğini anlamak için krom hata ayıklayıcıyı kullanabilirsiniz. kesme noktası (at col==undefined). Durduğunda i, şu anda hangi sütunun üzerinde olduğunu görmek için değişkeni kontrol edebilirsiniz. Umarım yardımcı olur!

Having <thead>ve <tbody>aynı sayılarla <th>ve <td>benim sorun çözüldü.

Bu 'aoColumns':[..], doğru sütun sayısıyla eşleşmeyen şeyler için tablo bağımsız değişkenleriniz varsa da oluşabilir . Bunun gibi sorunlar, veri tabloları entegrasyonunuzu hızlı bir şekilde başlatmak için diğer sayfalardan yapıştırma kodunu kopyalarken ortaya çıkabilir.

Misal:

Bu işe yaramaz:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 1, 'desc' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Ancak bu işe yarayacaktır:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 0, 'desc' ]],
            'aoColumns': [
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Bunun olmasının bir nedeni de DataTable başlatmasındaki column parametresidir.

Sütun sayısı başlıklarla eşleşmelidir

"columns" : [ {
                "width" : "30%"
            }, {
                "width" : "15%"
            }, {
                "width" : "15%"
            }, {
                "width" : "30%"
            } ]

7 sütunum vardı

<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>

Kendinizi colspanve sayısını th ve tdeşleşmesi gerekir.

İpuçları 1:

Bu bağlantıya bakın bazı fikirler:

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

İpuçları 2:

Aşağıdakilerin doğru olup olmadığını kontrol edin:

• Lütfen Jquery Vesion'u kontrol edin
• Sizinki versiion kontrol edin CDN veya yerel datatable ilgili .min & css dosyaları
• tablonuzda <thead></thead>& <tbody></tbody>etiketleri var
• Tablonuz Başlık Sütun Uzunluğu Gövde Sütun Uzunluğu ile aynı
• Bazı pıhtıları style='display:none'aynı şekilde kullanmanız hem Başlık hem de gövde için geçerlidir.
• tablo sütunlarınız boş değilse, [Null, -, NA, Nil] gibi bir şey kullanın
• Tablonuz iyi bir <td>, <tr>sorun yok

benim durumumda başlık olmadan tablo kullanırsanız bu hata oluştu

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>

Aynı hatayla karşılaştım, son th'e colspan eklemeye çalıştığımda

<table>
  <thead>
    <tr>    
      <th>&nbsp;</th> <!-- column 1 -->
      <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
    </tr>
  </tbody>
</table>

ve tr sonuna gizli sütun ekleyerek çözdüm

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->

    <!-- hidden column 4 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>

    <!-- hidden column 4 for proper DataTable applying -->
    <tr style="display: none"></tr>
  </tr>
</tbody>

Bunun açıklaması, herhangi bir nedenle DataTable'ın son inci'de colspan içeren tabloya uygulanamaması, ancak colspan'ın herhangi bir orta th'de kullanılması durumunda uygulanabilir.

Bu çözüm biraz hileli, ancak bulduğum diğer çözümlerden daha basit ve daha kısa.

Umarım birine yardım eder.

Yukarıda verilen cevaplardan benim için biraz farklı bir sorun. Benim için HTML işaretlemesi iyiydi, ancak javascript'teki sütunlarımdan biri eksikti ve html ile eşleşmedi.

yani

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

Senaryom: -

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>

Bir yazım hatası ile dinamik olarak oluşturulmuş, ancak kötü oluşturulmuş bir tablo vardı. Yanlışlıkla <td>başka bir etiketi kopyaladım <td>. Sütun sayım eşleşti. Ben vardı <thead>ve <tbody>etiketleri. Bir süre fark etmediğim bu küçük hata dışında her şey eşleşti, çünkü sütunumda çok fazla bağlantı ve resim etiketi vardı.

Aynı sorunla karşılaştım ama dinamik olarak tablo üretiyordum . Benim durumumda, masamın eksik <thead>ve <tbody>etiketleri vardı .

İşte birine yardım ederse kod snippet'im

   //table string
   var strDiv = '<table id="tbl" class="striped center responsive-table">';

   //add headers
   var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';


  //add data
  $.each(data, function (key, GetCustomerFeedbackBE) {
                            strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
                        });

//add end of tbody
 strTable = strTable + '</tbody></table>';

//insert table into a div                 
   $('#divCFB_D').html(strDiv);
   $('#tbl').html(strTable);


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

Tutarsız ve sayılara ek olarak, datatable komut dosyaları sütunları bölümündeki eksik bir öğe de buna neden olabilir. Veri tablolarım arama çubuğumu düzeltti.

Bu kısımdan bahsediyorum;

"columns": [
  null,
  .
  .
  .
  null
           ],

Bu bölümün toplam toplam sayımdan daha az bir "boş" olduğuna işaret edene kadar bu hatayla mücadele ettim.

Bu beni deli etti - nasıl bir .NET MVC görünümünde bir DataTable başarıyla render. Bu işe yaradı:

 **@model List<Student>
 @{
    ViewData["Title"] = "Index";
}
 <h2>NEW VIEW Index</h2>
 <table id="example" class="display" style="width:100%">
   <thead>
   <tr>
   <th>ID</th>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  </thead>
  <tbody>
@foreach (var element in Model)
{
    <tr>
    <td>@Html.DisplayFor(m => element.ID)</td>
    <td>@Html.DisplayFor(m => element.FirstName)</td>
    <td>@Html.DisplayFor(m => element.LastName)</td>
    </tr>

}
</tbody>
</table>**

JS dosyasındaki komut dosyası:

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

Benim durumumda ve ASP.NET GridView, UpdatePanel ve DropDownList (bir Javascript satırı kullanarak değeri sıfıra sıfırladığım Seçili eklenti ile) kullanarak, bu hatayı aldım ve günlerce umut olmadan her şeyi denedim. Sorun, arkasındaki kod benim açılan kodunun aşağıdaki gibi olması ve eylemini seçilen ızgara satırlarına uygulamak için iki kez bir değer seçtiğimde bu hatayı alıyorum. Günlerce bir Javascript sorunu (yine, benim durumumda) düşündüm ve sonunda düzeltme güncelleme işlemi ile drowpdown değeri için sıfır veriyordu:

  private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
  {
     if (ddlTasks.SelectedValue != 0) {
        ChangeStatus(ddlTasks.SelectedValue);
        ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
     }

     dvItemsGrid.DataSource = CreateDatasource();
     dvItemsGrid.DataBind();
     dvItemsGrid.UseAccessibleHeader = true;
     dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  }

Bu benim hatamdı:

     $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();

<thead>Sütun başlıkları ve satırlar için satırlarınızı sarmanız gerekir <tbody>. Ayrıca eşleşen no olduğundan emin olun. sütun başlıklarının <th>için olduğu gibitd

AoColumns alanından kaynaklanıyor olabilir. BURADA belirtildiği gibi

aoColumns: Belirtilirse, bu dizinin uzunluğu orijinal HTML tablosundaki sütun sayısına eşit olmalıdır. Yalnızca varsayılan değerleri ve otomatik olarak algılanan seçenekleri kullanmak istediğiniz yerde 'null' kullanın.

Sonra tablo sütunları gibi alanlar eklemeniz gerekir

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...

benim durumumda bu hatanın nedeni, kopyala-yapıştır tablo kodu alışkanlığım nedeniyle, farklı tablo yapısı ile aynı kimlik adına sahip 2 tablo var. lütfen her tablo için farklı bir kimliğiniz olduğundan emin olun.

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            <th>heading 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
            <td>data-4</td>
            <td>data-5</td>
        </tr>
    </tbody>
</table>

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

Biraz "çözüm" buldum.

Bu kod çalışmıyor:

<table>
<thead>
    <tr>
        <th colspan="3">Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

Ama bu sorun değil:

<table>
<thead>
    <tr>
        <th colspan="2">Test</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

Bence sorun şu ki, son TH'nin nitelik colspan'ı olamaz.