Dữ liệu: Không thể đọc thuộc tính 'mData' không xác định

Tôi có một vấn đề với Datatables. Tôi cũng đã đi qua liên kết này mà không mang lại kết quả nào. Tôi đã bao gồm tất cả các điều kiện tiên quyết trong đó tôi phân tích dữ liệu trực tiếp vào DOM. Xin vui lòng giúp tôi khắc phục vấn đề này.

Kịch bản

$(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 đòi hỏi một bảng cũng được hình thành. Nó phải chứa <thead>và <tbody>các thẻ, nếu không nó sẽ ném lỗi này. Đồng thời kiểm tra để đảm bảo tất cả các hàng của bạn bao gồm hàng tiêu đề có cùng số cột.

Sau đây sẽ ném lỗi (không <thead>và <tbody>thẻ)

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

Sau đây cũng sẽ đưa ra một lỗi (số lượng cột không bằng nhau)

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

Để biết thêm thông tin đọc thêm ở đây

Một nguyên nhân phổ biến Cannot read property 'fnSetData' of undefinedlà số lượng cột không khớp, như trong mã sai này:

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

Trong khi đoạn mã sau với một <th>trên mỗi<td> (số cột phải khớp) hoạt động:

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

Lỗi cũng xuất hiện khi sử dụng một thead hình thành tốt với một colspan nhưng không có hàng thứ hai.

Đối với một bảng có 7 colums, phần sau không hoạt động và chúng ta thấy "Không thể đọc thuộc tính 'mData' không xác định" trong bảng điều khiển javascript:

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

Trong khi điều này hoạt động:

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

Tôi gặp vấn đề tương tự khi sử dụng dữ liệu DOM trong chế độ xem Rails được tạo thông qua trình tạo giàn giáo. Theo mặc định, chế độ xem bỏ qua <th>các phần tử cho ba cột cuối cùng (chứa các liên kết để hiển thị, ẩn và hủy bản ghi). Tôi thấy rằng nếu tôi thêm vào tiêu đề cho các cột đó trong một <th>yếu tố trong <thead>đó nó đã khắc phục vấn đề.

Tôi không thể nói nếu đây là cùng một vấn đề bạn gặp phải vì tôi không thể thấy html của bạn. Nếu đó không phải là vấn đề tương tự, bạn có thể sử dụng trình gỡ lỗi chrome để tìm ra cột nào bị lỗi bằng cách nhấp vào lỗi trong bảng điều khiển (sẽ đưa bạn đến mã mà nó đang bị lỗi), sau đó thêm một điều kiện điểm dừng (tại col==undefined). Khi nó dừng, bạn có thể kiểm tra biến iđể xem cột nào hiện đang ở trên đó có thể giúp bạn tìm ra điểm khác biệt của cột đó so với cột khác. Mong rằng sẽ giúp!

Có <thead>và <tbody>với cùng số lượng <th>và <td>giải quyết vấn đề của tôi.

Điều này cũng có thể xảy ra nếu bạn có các đối số bảng cho những thứ như 'aoColumns':[..]không khớp với số cột chính xác. Các vấn đề như thế này thường có thể xảy ra khi sao chép mã dán từ các trang khác để nhanh chóng bắt đầu tích hợp dữ liệu của bạn.

Thí dụ:

Điều này sẽ không hoạt động:

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

Nhưng điều này sẽ làm việc:

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

Thêm một lý do tại sao điều này xảy ra là do tham số cột trong khởi tạo DataTable.

Số lượng cột phải khớp với các tiêu đề

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

Tôi đã có 7 cột

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

Bạn phải loại bỏ của bạn colspanvà số lượng th và tdnhu cầu để phù hợp.

Mẹo 1:

Tham khảo Liên kết này, bạn nhận được một số ý tưởng:

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-und xác định

Mẹo 2:

Kiểm tra sau đây là chính xác:

• Vui lòng kiểm tra Vesqu Jquery
• Vui lòng kiểm tra phiên bản CDN của bạn hoặc các tệp .min & css liên quan đến dữ liệu cục bộ của bạn
• bảng của bạn có <thead></thead>& <tbody></tbody>thẻ
• Cột của bạn Tiêu đề Cột Chiều dài giống như Chiều dài cột cơ thể
• Việc bạn sử dụng một số thông tin style='display:none'tương tự sẽ áp dụng cho bạn cả Header & body.
• các cột trong bảng của bạn không trống, sử dụng cái gì đó như [Null, -, NA, Nil]
• Bảng của bạn là một trong những <td>, <tr>vấn đề ra

trong trường hợp của tôi, lỗi này xảy ra nếu tôi sử dụng bảng không có tiêu đề

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

Tôi đã đối mặt với cùng một lỗi, khi cố gắng thêm colspan để cuối cùng

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

và giải quyết nó bằng cách thêm cột ẩn vào cuối tr

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

Giải thích cho điều đó là vì một số lý do, DataTable không thể được áp dụng cho bảng với colspan trong lần cuối cùng, nhưng có thể được áp dụng, nếu colspan được sử dụng ở bất kỳ giữa nào.

Giải pháp này hơi hack, nhưng đơn giản và ngắn hơn bất kỳ giải pháp nào tôi tìm thấy.

Tôi hy vọng điều đó sẽ giúp được ai đó.

Vấn đề hơi khác với tôi từ các câu trả lời ở trên. Đối với tôi, đánh dấu HTML là tốt, nhưng một trong những cột của tôi trong javascript bị thiếu và không khớp với html.

I E

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

Tập lệnh của tôi: -

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

Tôi đã có một bảng được tạo động, nhưng hình thành xấu với một lỗi đánh máy. Tôi đã sao chép một <td>thẻ bên trong một thẻ khác <td>do nhầm lẫn. Số cột của tôi khớp. Tôi đã có <thead>và <tbody>thẻ. Mọi thứ đều khớp, ngoại trừ lỗi nhỏ này tôi đã không nhận thấy trong một thời gian, bởi vì cột của tôi có rất nhiều thẻ liên kết và hình ảnh trong đó.

Tôi đã gặp vấn đề tương tự nhưng tôi đang tạo bảng Động . Trong trường hợp của tôi, bảng của tôi bị thiếu <thead>và <tbody>thẻ.

đây là đoạn mã của tôi nếu nó giúp được ai đó

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

Ngoài phần không nhất quán và số, một mục bị thiếu bên trong phần cột của tập lệnh có thể truy cập cũng có thể gây ra điều này. Sửa lỗi mà cố định thanh tìm kiếm dữ liệu của tôi.

Tôi đang nói về phần này;

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

Tôi đã vật lộn với lỗi này cho đến khi tôi được chỉ ra rằng phần này có ít "null" hơn tổng số lượng của tôi.

Điều này khiến tôi phát điên - cách kết xuất DataTable thành công trong chế độ xem .NET MVC. Điều này đã làm việc:

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

Tập lệnh trong tệp JS:

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

Trong trường hợp của tôi và sử dụng ASP.NET GridView, UpdatePanel và với DropDownList (với plugin Chosen nơi tôi đặt lại giá trị về 0 bằng một dòng Javascript), tôi đã gặp lỗi này và đã thử mọi thứ mà không hy vọng trong nhiều ngày. Vấn đề là mã thả xuống của mã phía sau của tôi như sau và khi tôi chọn một giá trị hai lần để áp dụng hành động của nó cho các hàng lưới đã chọn, tôi gặp lỗi đó. Tôi đã nghĩ trong nhiều ngày, đó là sự cố Javascript (một lần nữa, trong trường hợp của tôi) và cuối cùng, bản sửa lỗi đã đưa ra số 0 cho giá trị giảm dần với quá trình cập nhật:

  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;

  }

Đây là lỗi của tôi:

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

Bạn cần phải bọc các hàng của bạn <thead>cho các tiêu đề cột và <tbody>cho các hàng. Cũng đảm bảo rằng bạn có kết hợp không. của các tiêu đề cột <th>như bạn làm chotd

Tôi có thể được phát sinh bởi lĩnh vực aoColumns. Như đã nêu TẠI ĐÂY

aoColumns: Nếu được chỉ định, thì độ dài của mảng này phải bằng số lượng cột trong bảng HTML gốc. Sử dụng 'null' trong đó bạn chỉ muốn sử dụng các giá trị mặc định và các tùy chọn được phát hiện tự động.

Sau đó, bạn phải thêm các trường như trong Cột bảng

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

trong trường hợp của tôi, nguyên nhân của lỗi này là do tôi có 2 bảng có cùng tên id với cấu trúc bảng khác nhau, do thói quen sao chép mã bảng sao chép của tôi. hãy chắc chắn rằng bạn có id khác nhau cho mỗi bảng.

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

Tôi tìm thấy một số "giải pháp".

Mã này không hoạt động:

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

Nhưng điều này là ổn:

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

Tôi nghĩ rằng, vấn đề là, TH cuối cùng không thể có thuộc tính colspan.