DataTables: ไม่สามารถอ่านคุณสมบัติ 'mData' ของไม่ได้กำหนด

Datatablesฉันมีปัญหากับ ฉันยังผ่านลิงค์นี้ซึ่งไม่ได้ผลลัพธ์ใด ๆ ฉันได้รวมข้อกำหนดเบื้องต้นทั้งหมดที่ฉันแยกวิเคราะห์ข้อมูลโดยตรงใน DOM โปรดช่วยฉันแก้ไขปัญหานี้

ต้นฉบับ

$(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ต้องการตารางที่มีรูปแบบถูกต้อง มันจะต้องมี<thead>และ<tbody>แท็กมิฉะนั้นมันจะพ่นข้อผิดพลาดนี้ ตรวจสอบเพื่อให้แน่ใจว่าแถวทั้งหมดของคุณรวมถึงแถวส่วนหัวมีจำนวนคอลัมน์เท่ากัน

ข้อผิดพลาดต่อไปนี้จะเกิดขึ้น (ไม่ใช่<thead>และ<tbody>แท็ก)

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

ต่อไปนี้จะทำให้เกิดข้อผิดพลาด (จำนวนคอลัมน์ไม่เท่ากัน)

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

สำหรับข้อมูลเพิ่มเติมอ่านเพิ่มเติมได้ที่นี่

สาเหตุทั่วไปสำหรับCannot read property 'fnSetData' of undefinedคือจำนวนคอลัมน์ที่ไม่ตรงกันเช่นในรหัสที่ผิดพลาดนี้:

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

ในขณะที่รหัสต่อไปนี้ที่มีหนึ่งรายการ<th>ต่อ<td> (จำนวนคอลัมน์ต้องตรงกัน) ใช้งานได้:

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

ข้อผิดพลาดยังปรากฏขึ้นเมื่อใช้ thead ที่มีรูปแบบที่ดีพร้อม colspan แต่ไม่มีแถวที่สอง

สำหรับตารางที่มี 7 colums สิ่งต่อไปนี้ใช้ไม่ได้และเราเห็น "ไม่สามารถอ่านคุณสมบัติ 'mData' ที่ไม่ได้กำหนด" ในคอนโซล javascript:

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

ในขณะที่ใช้งานได้:

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

ฉันมีปัญหาเดียวกันนี้โดยใช้ข้อมูล DOM ในมุมมอง Rails ที่สร้างขึ้นผ่านตัวสร้างนั่งร้าน ตามค่าเริ่มต้นมุมมองจะไม่ใส่<th>องค์ประกอบสำหรับสามคอลัมน์สุดท้าย (ซึ่งมีลิงก์ที่จะแสดงซ่อนและทำลายบันทึก) ฉันพบว่าหากฉันเพิ่มชื่อสำหรับคอลัมน์เหล่านั้นใน<th>องค์ประกอบภายในตัว<thead>แก้ไขปัญหา

ฉันไม่สามารถบอกได้ว่านี่เป็นปัญหาเดียวกันกับที่คุณมีหรือไม่เพราะฉันไม่เห็น html ของคุณ หากไม่ใช่ปัญหาเดียวกันคุณสามารถใช้ chrome debugger เพื่อหาว่าคอลัมน์ใดที่เกิดข้อผิดพลาดโดยคลิกที่ข้อผิดพลาดในคอนโซล (ซึ่งจะนำคุณไปยังโค้ดที่ล้มเหลว) จากนั้นเพิ่มเงื่อนไข เบรกพอยต์ (ที่col==undefined) เมื่อหยุดคุณสามารถตรวจสอบตัวแปรiเพื่อดูว่าคอลัมน์ใดอยู่ในขณะนี้ซึ่งจะช่วยให้คุณทราบว่าคอลัมน์อื่นนั้นแตกต่างจากคอลัมน์อื่นอย่างไร หวังว่าจะช่วย!

มี<thead>และ<tbody>มีจำนวนเท่ากัน<th>และ<td>แก้ไขปัญหาของฉัน

สิ่งนี้สามารถเกิดขึ้นได้หากคุณมีข้อโต้แย้งของตารางสำหรับสิ่ง'aoColumns':[..]ที่ไม่ตรงกับจำนวนคอลัมน์ที่ถูกต้อง ปัญหาเช่นนี้มักเกิดขึ้นได้เมื่อคัดลอกรหัสการวางจากหน้าอื่น ๆ เพื่อเริ่มการรวมข้อมูลของคุณอย่างรวดเร็ว

ตัวอย่าง:

สิ่งนี้จะไม่ทำงาน:

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

แต่สิ่งนี้จะได้ผล:

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

อีกสาเหตุหนึ่งที่ทำให้สิ่งนี้เกิดขึ้นเนื่องจากพารามิเตอร์คอลัมน์ในการเริ่มต้น DataTable

จำนวนคอลัมน์จะต้องตรงกับส่วนหัว

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

ฉันมี 7 คอลัมน์

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

คุณต้องลบcolspanจำนวนth และtdความต้องการของคุณออก

เคล็ดลับที่ 1:

อ้างอิงลิงค์นี้คุณจะได้รับความคิดบางอย่าง:

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

เคล็ดลับ 2:

ตรวจสอบว่าถูกต้อง:

• โปรดตรวจสอบ Jquery Vesion
• โปรดตรวจสอบความหลากหลายของCDNของคุณหรือไฟล์. min & cssที่เกี่ยวข้องกับท้องถิ่นของคุณ
• ตารางของคุณมีแท็ก<thead></thead>&<tbody></tbody>
• ความยาวคอลัมน์ส่วนหัวของตารางของคุณเหมือนกับความยาวคอลัมน์ร่างกาย
• การใช้ cloumns ของคุณในความเหมาะสมstyle='display:none'เช่นเดียวกับคุณทั้งส่วนหัวและร่างกาย
• คอลัมน์ในตารางของคุณว่างเปล่าใช้บางอย่างเช่น[Null, -, NA, Nil]
• โต๊ะของคุณเป็นหนึ่งเดียวที่ไม่มี<td>, <tr>ปัญหา

ในกรณีของฉันข้อผิดพลาดนี้เกิดขึ้นถ้าฉันใช้ตารางโดยไม่มีส่วนหัว

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

ฉันประสบข้อผิดพลาดเดียวกันเมื่อพยายามเพิ่ม colspan ไปที่ th ล่าสุด

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

และแก้ไขมันโดยการเพิ่มคอลัมน์ที่ซ่อนอยู่ที่ส่วนท้ายของ 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>

Explanaition to นั่นคือด้วยเหตุผลบางอย่าง DataTable ไม่สามารถใช้กับตารางที่มี colspan ในช่วง th ล่าสุด แต่สามารถนำไปใช้ถ้า colspan ใช้ในกลาง th ใด ๆ

โซลูชันนี้ค่อนข้างแฮ็ค แต่ง่ายกว่าและสั้นกว่าโซลูชันอื่นที่ฉันพบ

ฉันหวังว่าจะช่วยใครบางคน

ปัญหาแตกต่างกันเล็กน้อยสำหรับฉันจากคำตอบข้างต้น สำหรับฉันมาร์กอัป HTML นั้นใช้ได้ แต่คอลัมน์หนึ่งใน javascript ของฉันขาดหายไปและไม่ตรงกับ html

กล่าวคือ

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

สคริปต์ของฉัน: -

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

ฉันมีตารางที่สร้างขึ้นแบบไดนามิก แต่มีรูปแบบที่ไม่ดีพร้อมพิมพ์ผิด ฉันคัดลอก<td>แท็กภายใน<td>โดยไม่ได้ตั้งใจ จำนวนคอลัมน์ของฉันตรงกัน ฉันมี<thead>และ<tbody>แท็ก ทุกอย่างตรงกันยกเว้นความผิดพลาดเล็กน้อยนี้ฉันไม่ได้สังเกตเห็นสักพักเพราะคอลัมน์ของฉันมีลิงก์และแท็กรูปภาพจำนวนมากอยู่ในนั้น

ฉันได้พบปัญหาเดียวกัน แต่ผมสร้างตารางแบบไดนามิก ในกรณีของฉันตารางของฉันหายไป<thead>และ<tbody>แท็ก

นี่คือข้อมูลโค้ดของฉันหากมันช่วยใครซักคน

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

นอกเหนือจากที่ไม่สอดคล้องกันและตัวเลขรายการที่ขาดหายไปภายในส่วนคอลัมน์สคริปต์สคริปต์ที่สามารถบันทึกข้อมูลได้สามารถทำให้เกิดสิ่งนี้ได้เช่นกัน การแก้ไขที่แก้ไขแถบค้นหา DataTables ของฉัน

ฉันกำลังพูดถึงส่วนนี้

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

ฉันต่อสู้กับข้อผิดพลาดนี้จนกระทั่งฉันชี้ว่าส่วนนี้มี "โมฆะ" น้อยกว่าการนับทั้งหมดของฉัน

อันนี้ทำให้ฉันเป็นบ้า - วิธีการสร้าง DataTable ได้สำเร็จในมุมมอง. NET MVC สิ่งนี้ได้ผล:

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

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

ในกรณีของฉันและการใช้ ASP.NET GridView, UpdatePanel และ DropDownList (ด้วย Chosen plugin ที่ฉันรีเซ็ตค่าเป็นศูนย์โดยใช้บรรทัด Javascript)ฉันได้รับข้อผิดพลาดนี้และลองทุกอย่างโดยไม่หวังเลย ปัญหาคือรหัสของหล่นลงของฉันในรหัสหลังเป็นดังนี้และเมื่อฉันเลือกค่าสองครั้งเพื่อใช้การกระทำกับแถวกริดที่เลือกฉันได้รับข้อผิดพลาดนั้น ฉันคิดว่าหลายวันเป็นปัญหา Javascript (อีกครั้งในกรณีของฉัน) และในที่สุดการแก้ไขก็ให้ศูนย์สำหรับค่า drowpdown ด้วยกระบวนการอัปเดต:

  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;

  }

นี่เป็นความผิดของฉัน:

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

คุณต้องล้อมแถวของคุณไว้<thead>สำหรับส่วนหัวคอลัมน์และ<tbody>แถว ตรวจสอบให้แน่ใจว่าคุณมีหมายเลขที่ตรงกัน ของส่วนหัวคอลัมน์<th>เช่นเดียวกับที่คุณทำtd

ฉันอาจเกิดขึ้นโดยฟิลด์ aoColumns ตามที่ระบุไว้ที่นี่

aoColumns: หากระบุความยาวของอาร์เรย์นี้จะต้องเท่ากับจำนวนคอลัมน์ในตาราง HTML ดั้งเดิม ใช้ 'null' ที่คุณต้องการใช้เฉพาะค่าเริ่มต้นและตัวเลือกที่ตรวจพบโดยอัตโนมัติ

จากนั้นคุณต้องเพิ่มเขตข้อมูลเช่นเดียวกับในคอลัมน์ตาราง

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

ในกรณีของฉันสาเหตุของข้อผิดพลาดนี้คือฉันมี 2 ตารางที่มีชื่อ id เดียวกันกับโครงสร้างตารางที่แตกต่างกันเพราะนิสัยของฉันของรหัสตารางคัดลอกวาง โปรดตรวจสอบว่าคุณมี ID ที่แตกต่างกันสำหรับแต่ละตาราง

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

ฉันพบ "วิธีแก้ปัญหา" บางอย่าง

รหัสนี้ใช้ไม่ได้:

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

แต่นี่ก็โอเค:

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

ฉันคิดว่าปัญหาคือว่า TH ล่าสุดไม่สามารถมีแอตทริบิวต์ colspan