Question

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

未捕获的TypeError：无法读取属性＆＃39; mData＆＃39;未定义的

我的页面srcipt：

 $(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未答复的问题，同样的错误，但我的标准不同，因此不重复。

Answer 1

原因

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

来自manual：

aoColumns：如果指定，则此数组的长度必须相等到原始HTML表中的列数。使用＆＃39; null＆＃39;哪里您希望仅使用默认值并自动检测选项。

解

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

＆＃13;

$(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
   } );

} );

＆＃13;

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

＆＃13;

LINKS

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

Answer 2

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

之前我们已经讨论了here at SO这个问题，所以下次谷歌搜索或SO搜索可能会是一件好事。

Answer 3

如果你的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
        } );
    } );

Answer 4

在使用 k 之类的 id 名称时，出现了此错误。我通过将其“重新命名”为 ksomething1 来解决它。

未捕获的TypeError：无法读取属性＆＃39; mData＆＃39;未定义的

4 个答案:

原因

解

LINKS