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

Posted 2023-05-09

【中文标题】数据表中的错误：无法显示正确的行数

【英文标题】：Error in Datatable: Cannot display correct number of rows

【发布时间】：2018-07-03 05:19:43

【问题描述】：

我正在使用 angularjs 和数据表。我可以完美地显示数据，但是在分页和显示行时遇到问题。页面加载时显示的行数为 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
        )
  )

【问题讨论】：

我现在没有时间写一个完整的答案。作为一般经验法则，您永远不应该在控制器中进行一些 DOM 操作，因为它会导致文档和模型之间出现各种同步问题。要解决您的问题，您可以编写自己的指令来包装 Datatable 插件或使用现有指令之一。搜索 AngularJS 数据表，你会发现很多

【参考方案1】：

您应该仅在加载整个数据后调用 .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);

【讨论】：

谢谢！是的，我认为这就是问题