角度数据 - 获取当前页面总页数 [英] Angular datatable - get current page & Total page

问题描述

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

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

$ scope.dtInstance.DataTable.page（）

我的HTML代码：

 < table datatable =ngdt-options =itemTable.dtOptions dt-instance =itemTable.dtInstancedt-column-defs =itemTable.dtColumnDefsclass =table row-border hover> 
  

控制器代码

  var vm = this; 
 vm.items = []; 
 vm.dtOptions = DTOptionsBuilder.newOptions（）。withPaginationType（'full'）
 .withDisplayLength（10）
 .withOption（'bFilter'，false）
 .withDOM（' <top pull-left itemtableInfoi> rt<bottom<＃itemtablePageInfo> p>'）
 .withLanguage（{
sInfo：'< div>< ; span class =searchDetail>显示< b> \'+ $ rootScope.searchValue +'\< / b>< / span>< span class =searchCount pull-right >显示_START_到_END_< / span>< span class =testDiv> hello< / span>'，
processing：Processing ...，
loadingRecords ：Loading ...，
paginate：{
first：'< i class =fa fa-backwardaria-hidden =true>< / i> ;'，
last：'< i class =fa fa-forwardaria-hidden =true>< / i>'，
next ，
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（）函数。

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

1. 
   
   

   ~~ Suriya

   
   

   I am using Angular Datatable. I need to fetch the current page number and total page number and show it like the below image

   In the below SO link, there is an option provided to use (in my code, i have used vm instead of scope)

   $scope.dtInstance.DataTable.page()

   My Table code in HTML :

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

   Controller Code:

   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;
   });
   

   But my dtInstance is always returning me null object and cant retrieve either datatable or page() function in dtInstance.

   Below are some of the links i have checked. Looking for some help. please let me know if anyone has faced similar issues.

   1. Angular DataTable not populating DTInstance
   2. Paging is reset when data is updated with Angular-DataTables
   3. https://github.com/l-lin/angular-datatables/issues/312

   解决方案

   Finally i am able to fix the issue :):) Below is the code. Please do let me know your suggestions.

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

   Below is the final output.

   ~~Suriya

   这篇关于角度数据 - 获取当前页面总页数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！