【问题标题】:jQuery dataTable error Cannot read property 'mData' of undefinedjQuery dataTable 错误无法读取未定义的属性“mData”
【发布时间】:2018-09-12 06:42:53
【问题描述】:

我有以下有 6 列的数据表。

渲染表格后,我正在初始化.DataTable()。但得到错误:

未定义类型错误的“mData”:无法读取未定义的属性“mData”

正如一些帖子中提到的,我添加了 tfoot 但仍然有错误。

$(document).ready(function() {
    $('#pTable').DataTable();
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="pTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Status</th>
            <th>Name</th>
            <th>NOK</th>
            <th>Phone</th>
            <th>IsEnabled</th>
            <th>Add/Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
            <td><span class="label label-accent">Active</span></td>
            <td class="text-muted" data-bind="text: NAME">Buddy1</td>
            <td class="text-muted" data-bind="text: NOK">SomeOne</td>
            <td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
            <td class="text-muted">
                <div class="pretty p-round p-fill p-icon">
                    <input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
                    <div class="state p-primary">
                        <i class="icon fa fa-check"></i>
                        <label data-bind="text: ISENABLED">true</label>
                    </div>
                </div>
            </td>
            <td class="text-muted">
                <div class="btn-group pull-right">
                    <button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
                                                    <i class="fa fa-edit"></i> Edit
                                                </button>
                </div>
            </td>
        </tr>
        <tr>

            <td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
            <td><span class="label label-accent">Active</span></td>
            <td class="text-muted" data-bind="text: NAME">Buddy2</td>
            <td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
            <td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
            <td class="text-muted">
                <div class="pretty p-round p-fill p-icon">
                    <input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
                    <div class="state p-primary">
                        <i class="icon fa fa-check"></i>
                        <label data-bind="text: ISENABLED">false</label>
                    </div>
                </div>
            </td>
            <td class="text-muted">
                <div class="btn-group pull-right">
                    <button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
                                                    <i class="fa fa-edit"></i> Edit
                                                </button>
                </div>
            </td>

        </tr>

    </tbody>
    <tfoot>
        <tr>
            <th>Status</th>
            <th>Name</th>
            <th>Patients</th>
            <th>Phone</th>
            <th>IsEnabled</th>
            <th>Add/Edit</th>
        </tr>
    </tfoot>
</table>

【问题讨论】:

  • mData 在哪里定义?我在你的帖子里看不到。可能的原因是其中一个属性为空或 NaN 或类似的东西,而您没有处理它。
  • 你有 7 个 td 的 6 个标题,添加一个
  • @bilpor,感谢您尝试回答或帮助,但我认为我们需要对所讨论的框架有一些背景和想法。你知道数据表是怎么用的吗?

标签: javascript jquery datatable datatables


【解决方案1】:

您有 6 个ths,但在两行中有 7 个tds。 th 的编号必须与td 的编号匹配。添加隐藏的th 修复它

$(document).ready(function() {
    $('#pTable').DataTable();
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="pTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th style="display:none"></th>
            <th>Status</th>
            <th>Name</th>
            <th>NOK</th>
            <th>Phone</th>
            <th>IsEnabled</th>
            <th>Add/Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
            <td><span class="label label-accent">Active</span></td>
            <td class="text-muted" data-bind="text: NAME">Buddy1</td>
            <td class="text-muted" data-bind="text: NOK">SomeOne</td>
            <td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
            <td class="text-muted">
                <div class="pretty p-round p-fill p-icon">
                    <input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
                    <div class="state p-primary">
                        <i class="icon fa fa-check"></i>
                        <label data-bind="text: ISENABLED">true</label>
                    </div>
                </div>
            </td>
            <td class="text-muted">
                <div class="btn-group pull-right">
                    <button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
                                                    <i class="fa fa-edit"></i> Edit
                                                </button>
                </div>
            </td>
        </tr>
        <tr>

            <td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
            <td><span class="label label-accent">Active</span></td>
            <td class="text-muted" data-bind="text: NAME">Buddy2</td>
            <td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
            <td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
            <td class="text-muted">
                <div class="pretty p-round p-fill p-icon">
                    <input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
                    <div class="state p-primary">
                        <i class="icon fa fa-check"></i>
                        <label data-bind="text: ISENABLED">false</label>
                    </div>
                </div>
            </td>
            <td class="text-muted">
                <div class="btn-group pull-right">
                    <button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
                                                    <i class="fa fa-edit"></i> Edit
                                                </button>
                </div>
            </td>

        </tr>

    </tbody>
    <tfoot>
        <tr>
            <th>Status</th>
            <th>Name</th>
            <th>Patients</th>
            <th>Phone</th>
            <th>IsEnabled</th>
            <th>Add/Edit</th>
        </tr>
    </tfoot>
</table>

【讨论】:

    【解决方案2】:

    每行中标题thead tr th 和tbody tr td 中的单元格数应该相同(页脚也相同)。执行此操作后,此错误将被删除。

    '<table id="pTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Status</th>
            <th>Name</th>
            <th>NOK</th>
            <th>Phone</th>
            <th>IsEnabled</th>
            <th>Add/Edit</th>
            <th>Some Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
            <td><span class="label label-accent">Active</span></td>
            <td class="text-muted" data-bind="text: NAME">Buddy1</td>
            <td class="text-muted" data-bind="text: NOK">SomeOne</td>
            <td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
            <td class="text-muted">
                <div class="pretty p-round p-fill p-icon">
                    <input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
                    <div class="state p-primary">
                        <i class="icon fa fa-check"></i>
                        <label data-bind="text: ISENABLED">true</label>
                    </div>
                </div>
            </td>
            <td class="text-muted">
                <div class="btn-group pull-right">
                    <button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
                                                    <i class="fa fa-edit"></i> Edit
                                                </button>
                </div>
            </td>
        </tr>
        <tr>
    
            <td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
            <td><span class="label label-accent">Active</span></td>
            <td class="text-muted" data-bind="text: NAME">Buddy2</td>
            <td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
            <td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
            <td class="text-muted">
                <div class="pretty p-round p-fill p-icon">
                    <input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
                    <div class="state p-primary">
                        <i class="icon fa fa-check"></i>
                        <label data-bind="text: ISENABLED">false</label>
                    </div>
                </div>
            </td>
            <td class="text-muted">
                <div class="btn-group pull-right">
                    <button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
                                                    <i class="fa fa-edit"></i> Edit
                                                </button>
                </div>
            </td>
    
        </tr>
    
    </tbody>
    <tfoot>
        <tr>
            <th>Status</th>
            <th>Name</th>
            <th>Patients</th>
            <th>Phone</th>
            <th>IsEnabled</th>
            <th>Add/Edit</th>
            <th>Some Heading</th>
        </tr>
    </tfoot>
    

    '

    【讨论】:

      猜你喜欢
      • 2016-04-10
      • 1970-01-01
      • 2019-04-15
      • 2015-08-02
      • 1970-01-01
      • 2015-07-19
      • 1970-01-01
      • 2021-09-12
      相关资源
      最近更新 更多