Angular datatable - 获取当前页面＆Total page

我正在使用Angular Datatable。我需要获取当前页码和总页数，并显示它像下面的图片Angular datatable - 获取当前页面＆Total page

在下方，以便链接，提供了一种在我的代码中使用（一种选择，我已经使用虚拟机，而不是范围）

$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总是返回我空对象，不能在dtInstance检索或者数据表或页面（）函数。

下面是我检查过的一些链接。寻找一些帮助。如果有人遇到类似问题，请让我知道。

来源

2016-08-26 Suriya Rakhunathan

您声明'vm.dtInstance = {}'但尝试访问'$ scope.dtInstance' ..？请删除[**上述问题**的第一个版本]（http://stackoverflow.com/questions/39120005/angular-datatable-custom-pagination-info）或这个，或两者兼而有之。 – davidkonrad

@davidkonrad，在我的代码中，我想通过'vm'访问dtInstance。在SO链接中，它被作为范围给出。我修改了我的问题。 –

@davidkonrad，我用我已经完成的修复来关闭我之前的问题。请帮助我解决“dtInstance”和页码问题。 –

最后我能够解决这个问题:) :) 下面是代码。请让我知道你的建议。

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

       });

以下是最终输出。

~~素里亚

来源

2016-08-29 07:03:54

Angular datatable - 获取当前页面＆Total page

回答

相关问题