如何在AngularJS中使用智能表显示记录总数

Question

我正在使用智能表来显示记录。使用自定义分页显示每页20条记录。

我希望显示分页：1 - 20 of 25 Records如何实现这一目标？ - 我尝试使用（页面数量*总页数），但这会使结果四舍五入。

Answer 1

你可以使用totalItemCount中的tableState.pagination。只需从服务器获取数据并在分页模板中使用该值，就可以填充该值。

Answer 2

我找到了解决问题的方法。我知道这是一个老问题但是为了让它对其他人更有帮助，我想展示如何使这个解决方案更好。

您给出的答案在第一页和后续页面上是正确的，但并不总是在最后一页上。

你这样做：

<span class="pagination-info itemCount">
     {{(currentPage-1)*stItemsByPage+1}}-
     {{currentPage*stItemsByPage}} 
     of {{numPages*stItemsByPage}} Records
</span>

如果最后一页上的记录数小于stItemsByPage，则永远不会正确。在这种情况下，这会更好：

<span class="pagination-info itemCount">
     {{(currentPage-1)*stItemsByPage+1}}-
     {{(currentPage*stItemsByPage) > totalItemCount?totalItemCount:(currentPage*stItemsByPage)}} 
     of {{numPages*stItemsByPage}} Records
</span>

Answer 3

首先，你应该创建指令

ticketsApp.directive('stSummary', function () {

    return {
    restrict: 'E',
    require: '^stTable',
    template:'<span><b>[[pagination.start ]]  of [[pagination.totalItemCount]] items</b></span>',
    scope: {},
    link: function (scope, element, attr, ctrl) {
      var listener = function (val) {
        scope.pagination = ctrl.tableState().pagination;
        scope.to = Math.min(scope.pagination.start + scope.pagination.number, scope.total || 0);
      };
      scope.$watch(ctrl.tableState(), listener, true);
    }
  }
});`

之后，您应该在视图中使用“stSummary”标记。例如：

<st-summary st-items-by-page="10" 
            class="pull-right"
            class="pagination-info itemCountnumber">
</st-summary>` 

Answer 4

受dhiraj tiwari回答的启发，除非包含在函数调用中，否则watch无法工作：

  .directive('stPaginationSummary', function () {
    return {
      restrict: 'E',
      require: '^stTable',
      template: '<span>Showing <strong>{{from}}</strong>-<strong>{{to}}</strong> of <strong>{{total}}</strong> Record(s)</span>',
      scope: {},
      link: function (scope, element, attr, ctrl) {
        var listener = function () {
          var pagination = ctrl.tableState().pagination
          scope.from = pagination.totalItemCount === 0 ? 0 : pagination.start + 1
          scope.to = Math.min(pagination.start + pagination.number, pagination.totalItemCount)
          scope.total = pagination.totalItemCount
        }
        scope.$watch(function () {
          return ctrl.tableState()
        }, listener, true)
      }
    }
  })