我正在使用angularjs和datatable。我可以完美地显示数据,但我在分页和显示行时遇到问题。页面加载时显示的行数为10,UI显示如下:
显示10个条目
但它显示所有数据而不仅仅是10,在我重新加载页面几次后,它会显示正确的行数但有时会返回错误,在jquery.dataTables.min.js中表示mData未定义,有时没有错误。如何更正页面上显示的行数?我的代码在html
中如下所示<div style="width: 90%;">
<table class="table" id="HistoryTB" >
<thead>
<tr>
<th>
UserName
</th>
<th>
Time And Date
</th>
<th>
IP Address
</th>
</tr>
<tbody>
<tr ng-repeat="item in HistoryData">
<td>
{{item.Username}}
</td>
<td>
{{item.TimeandDate}}
</td>
<td>
{{item.IPaddress}}
</td>
</tr>
</tbody>
</table>
</div>
在我的控制器中,我有这样的代码:
这适用于数据表:
$(function () {
$('#HistoryTB').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : false,
'autoWidth' : false
})
})
答案 0 :(得分:0)
只有在加载完整个数据后才能调用.dataTable()函数。我认为你的问题是ng-repeat在调用函数后呈现表。您应该使用datatable的'data'属性来生成表而不是使用ng-repeat。
https://datatables.net/examples/data_sources/js_array.html
$(function () {
// code to fetch HistoryData
$('#HistoryTB').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : false,
'autoWidth' : false,
'data' : $scope.HistoryData
})
})
或者你应该在调用.dataTable()函数之前等待ng-repeat指令完成。
//code to fetch HistoryDate
$timeout(function() {
$('#HistoryTB').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : false,
'autoWidth' : false
})
}, 500);