角度数据表 - 获取当前页面和总页面答案

【问题标题】：Angular datatable - get current page & Total page角度数据表 - 获取当前页面和总页面
【发布时间】：2016-08-26 07:51:19
【问题描述】：

我正在使用 Angular 数据表。我需要获取当前页码和总页码并如下图所示显示

在下面的 SO 链接中，有一个选项可供使用（在我的代码中，我使用了 vm 而不是作用域）

$scope.dtInstance.DataTable.page()

我的 HTML 表格代码：

<table datatable="ng" dt-options="itemTable.dtOptions" dt-instance="itemTable.dtInstance" dt-column-defs="itemTable.dtColumnDefs" class="table row-border hover">

控制器代码：

var vm = this;
vm.items = [];
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full')
.withDisplayLength(10)
.withOption('bFilter', false)
.withDOM('<"top pull-left itemtableInfo"i>rt<"bottom"<"#itemtablePageInfo">p>')
.withLanguage({
"sInfo": '<div><span class="searchDetail">Displaying _TOTAL_ results for <b>\"'+$rootScope.searchValue+'\"</b> </span><span class="searchCount pull-right">Showing _START_ to _END_</span><span class="testDiv">hello</span>',
"processing": "Processing...",
"loadingRecords": "Loading...",
"paginate": {
"first": '<i class="fa fa-backward" aria-hidden="true"></i>',
"last": '<i class="fa fa-forward" aria-hidden="true"></i>',
"next": "Next",
"previous": "Previous"
}
});
vm.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0),
    DTColumnDefBuilder.newColumnDef(1).notSortable(),
    DTColumnDefBuilder.newColumnDef(2).notSortable(),
    DTColumnDefBuilder.newColumnDef(3),
    DTColumnDefBuilder.newColumnDef(4),
    DTColumnDefBuilder.newColumnDef(5),
    DTColumnDefBuilder.newColumnDef(6).notSortable(),
    DTColumnDefBuilder.newColumnDef(7),
    DTColumnDefBuilder.newColumnDef(8).notSortable()
];
vm.dtInstance = {};
$resource('./scripts/controllers/data.json').query().$promise.then(function (items) {
    vm.items = items;
});

但是我的 dtInstance 总是返回 null 对象，并且无法在 dtInstance 中检索数据表或 page() 函数。

以下是我检查过的一些链接。寻求帮助。如果有人遇到过类似问题，请告诉我。

【问题讨论】：

您声明了vm.dtInstance = {}，但尝试访问$scope.dtInstance ..？请删除first version of the above question，或此，或两者兼而有之。
@davidkonrad，在我的代码中，我试图仅通过“vm”访问 dtInstance。在 SO 链接中，它作为范围给出。我修改了我的问题。
@davidkonrad，我已经用我完成的修复解决了我之前的问题。请帮我解决“dtInstance”和页码问题。
如何获取当前页码？假设我已经导航到表格的第 4 页，并且我想将页码视为 4？
如果您在第 4 页，那么 vm.dtInstance.DataTable.page() 将返回 3。这真的很简单。

标签： angularjs datatable pagination

【解决方案1】：

我终于可以解决问题了:):) 下面是代码。请让我知道您的建议。

 vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full')
                        .withDisplayLength(5)
                        .withOption('bFilter', false)
                        .withOption('drawCallback', function(settings) {
                              if(settings.aoData.length > 0) {
                                var api = this.api();
                                var pgNo = api.page.info();
                                var currPg = pgNo.page;
                                var totalPg = pgNo.pages;
                                // get the label where i need to print the page number details
                                var myEl = angular.element(document.querySelector('#pgNoDetail'));
                                myEl.text('Page '+(currPg + 1)+' of '+totalPg);
                               }
                        })
                       .withDOM('<"top pull-left itemtableInfo"i>rt<"bottom"p>')
                       .withLanguage({
                          "sInfo": '<div><span class="searchDetail">Displaying _TOTAL_ results for <b>\"'+$rootScope.searchValue+'\"</b> </span><span class="searchCount pull-right">Showing _START_ to _END_</span>',
                          "processing": "Processing...",
                          "loadingRecords": "Loading...",
                          "paginate": {
                              "first": '<i class="fa fa-backward" aria-hidden="true"></i>',
                              "last": '<i class="fa fa-forward" aria-hidden="true"></i>',
                              "next": "Next",
                              "previous": "Previous"
                           }

              });

下面是最终输出。

~~苏利亚

【讨论】：