Question

我正在使用Angular Datatable。我需要获取当前页码和总页码，并将其显示如下图所示

在下面的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中检索datatable或page（）函数。

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

Answer 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"
                           }

              });

以下是最终输出。

~~素里亚

角度数据表 - 获取当前页面＆amp;总页数

1 个答案: