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

回答

相關問題