数据表中的错误:无法显示正确的行数

时间:2018-01-24 08:23:28

标签: jquery angularjs datatable datatables

我正在使用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
        })
  })

1 个答案:

答案 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);