我跟着
this
使用DataTables插件启用多个表(在同一页面上).
对于手动表,它可以工作,但对于动态创建的表,它显示以下错误：
使用DataTables插件启用多个表(在同一页面上).
对于手动表,它可以工作,但对于动态创建的表,它显示以下错误：
Uncaught TypeError: Cannot read property ‘mData’ of undefined
我的页面srcipt：
$(document).ready(function() {
$('table.datatable').dataTable( {
'bSort': false,'aoColumns': [
{ sWidth: "45%",bSearchable: false,bSortable: false },{ sWidth: "45%",{ sWidth: "10%",bSortable: false }
],"scrollY": "200px","scrollCollapse": false,"info": true,"paging": true
} );
} );
my HTML first table:
<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,500,000.00 </span></td>
</tr>
</tbody>
</table>
second 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,5:15 pm</td>
<td>Rs 12.00 </td>
<td></td>
</tr>
<tr>
<td>May 20,5:15 pm</td>
<td>Rs 123.00 </td>
<td></td>
</tr>
<tr>
<td>May 20,5:15 pm</td>
<td>Rs 123.00 </td>
<td></td>
</tr>
</tbody>
</table>
任何想法如何解决？
解决方法
原因
您正尝试使用相同的选项初始化多个表,最重要的一个是aoColumns,包含列定义的数组.您的aoColumns数组仅包含3个项目,但每个表中的列数不同,这就是您收到错误的原因.
从manual：
aoColumns: If specified,then the length of this array must be equal
to the number of columns in the original HTML table. Use ‘null’ where
you wish to use only the default values and automatically detected
options.
解
您需要为第一个表分配唯一ID并分别初始化每个表,如下所示.
$(document).ready(function() {
$('#table_first').dataTable( {
'bSort': false,'aoColumns': [
{ sWidth: "15%",{ sWidth: "15%",],"paging": true
});
$('#p_history').dataTable( {
'bSort': false,'aoColumns': [
{ sWidth: "45%",bSortable: false }
],"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,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,5:15 pm</td>
<td>Rs 123.00 </td>
<td></td>
</tr>
</tbody>
</table>
有关此错误和其他常见控制台错误的详细信息,请参阅jQuery DataTables: Common JavaScript console errors.
