未捕获的TypeError：无法读取未定义的属性“mData”

问题描述 投票：6回答：4

我跟着this使用DataTables插件启用多个表（在同一页面上）。对于手动表，它可以工作，但对于动态创建的表，它显示以下错误：

未捕获的TypeError：无法读取未定义的属性“mData”

我的页面脚本：

 $(document).ready(function() {
         $('table.datatable').dataTable( {
            'bSort': false,
            'aoColumns': [
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "10%", bSearchable: false, bSortable: false }
            ],
            "scrollY":        "200px",
            "scrollCollapse": false,
            "info":           true,
            "paging":         true
        } );
    } );

我的HTML第一个表：

<table class="table table-striped table-bordered datatable">
    <thead>
        <tr>
            <th>  Issue      </th>
            <th>  Product      </th>
            <th>  Qty      </th>
            <th class="text-right"> Paid    </th>
            <th class="text-right"> Balance    </th>
            <th class="text-right"> Total    </th>
        </tr>   
    </thead><!-- table head -->
    <tbody>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Normal Sim</td>
            <td>1000</td>
            <td><span class="pull-right">Rs18,893.00 </span></td>
            <td><span class="pull-right">Rs131,107.00 </span></td>
            <td><span class="pull-right">Rs150,000.00 </span></td>
        </tr>
        <tr>
            <td>voice/7?invoice_type=1">May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>10000</td>
            <td><span class="pull-right">Rs2,520,000.00 </span></td>
            <td><span class="pull-right">Rs12,480,000.00 </span></td>
            <td><span class="pull-right">Rs15,000,000.00 </span></td>
        </tr>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>1000</td>
            <td><span class="pull-right">Rs404,000.00 </span></td>
            <td><span class="pull-right">Rs1,096,000.00 </span></td>
            <td><span class="pull-right">Rs1,500,000.00 </span></td>
        </tr>
    </tbody>
</table>

第二表：

<table class="table table-striped table-bordered datatable" id="p_history">
    <thead>
        <tr>
            <th>Issue</th>
            <th>Paid</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 15,000.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 12.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
    </tbody>
</table>

任何想法如何解决？

注意：我也阅读this未答复的问题，同样的错误，但我的是不同的标准，因此它不是重复。

javascript php jquery jquery-datatables
4个回答
14
投票

CAUSE

您正尝试使用相同的选项初始化多个表，最重要的一个是aoColumns，数组保持列定义。您的aoColumns数组仅包含3个项目，但每个表中的列数不同，这就是您收到错误的原因。

来自manual：

aoColumns：如果指定，则此数组的长度必须等于原始HTML表中的列数。如果您只希望使用默认值和自动检测的选项，请使用“null”。

SOLUTION

您需要将唯一的id分配给第一个表并分别初始化每个表，如下所示。

$(document).ready(function() {
   $('#table_first').dataTable( {
       'bSort': false,
       'aoColumns': [
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
       ],
       "scrollY":        "200px",
       "scrollCollapse": false,
       "info":           true,
       "paging":         true
   });

    $('#p_history').dataTable( {
       'bSort': false,
       'aoColumns': [
             { sWidth: "45%", bSearchable: false, bSortable: false },
             { sWidth: "45%", bSearchable: false, bSortable: false },
             { sWidth: "10%", bSearchable: false, bSortable: false }
       ],
       "scrollY":        "200px",
       "scrollCollapse": false,
       "info":           true,
       "paging":         true
   } );

} );
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>

<table class="table table-striped table-bordered datatable" id="table_first">
    <thead>
        <tr>
            <th>  Issue      </th>
            <th>  Product      </th>
            <th>  Qty      </th>
            <th class="text-right"> Paid    </th>
            <th class="text-right"> Balance    </th>
            <th class="text-right"> Total    </th>
        </tr>   
    </thead><!-- table head -->
    <tbody>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Normal Sim</td>
            <td>1000</td>
            <td><span class="pull-right">Rs18,893.00 </span></td>
            <td><span class="pull-right">Rs131,107.00 </span></td>
            <td><span class="pull-right">Rs150,000.00 </span></td>
        </tr>
        <tr>
            <td>voice/7?invoice_type=1">May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>10000</td>
            <td><span class="pull-right">Rs2,520,000.00 </span></td>
            <td><span class="pull-right">Rs12,480,000.00 </span></td>
            <td><span class="pull-right">Rs15,000,000.00 </span></td>
        </tr>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>1000</td>
            <td><span class="pull-right">Rs404,000.00 </span></td>
            <td><span class="pull-right">Rs1,096,000.00 </span></td>
            <td><span class="pull-right">Rs1,500,000.00 </span></td>
        </tr>
    </tbody>
</table>

<table class="table table-striped table-bordered datatable" id="p_history">
    <thead>
        <tr>
            <th>Issue</th>
            <th>Paid</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 15,000.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 12.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
    </tbody>
</table>

LINKS

有关此错误和其他常见控制台错误的详细信息，请参阅jQuery DataTables: Common JavaScript console errors。

9
投票

正如DataTables usage guide中所述，您需要在表中声明thead和tbody部分才能使插件正常工作。

这件事之前也曾讨论过here at SO，所以下次谷歌搜索或SO搜索可能会是一件好事。

2
投票

如果你的aaData是一个数组数组，例如[["col11","col12","col13"],["col21","col22","col23"]]，那么只有上面的代码可以工作，否则它会期望mdata属性设置为col值，例如，aaData=[{col1:"col1val",col2:"col2val",col3:"col3val"}]，

映射aoColumns-所以在aoColumns：[{mdata:"col1"}]

做这个 -

$(document).ready(function() {
         $('#p_history').dataTable( {
            'bSort': false,
            'aoColumns': [
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "10%", bSearchable: false, bSortable: false },
                  //match the number of columns here for table1
            ],
            "scrollY":        "200px",
            "scrollCollapse": false,
            "info":           true,
            "paging":         true
        } );


//Now for another table
         $('#secondTableId').dataTable( {
            'bSort': false,
            'aoColumns': [
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "10%", bSearchable: false, bSortable: false },
                  //match the number of columns here for table2
            ],
            "scrollY":        "200px",
            "scrollCollapse": false,
            "info":           true,
            "paging":         true
        } );
    } );
0
投票

我在使用像k_something_1这样的id名称时遇到了这个错误。我通过'重命名'到ksomething1解决了它。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.