Angular datatable - get current page & Total page

Question

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.

You declare `vm.dtInstance = {}` but try to access `$scope.dtInstance` ..? Please delete the [**first version of the above question**](http://stackoverflow.com/questions/39120005/angular-datatable-custom-pagination-info), or this, or both. — davidkonrad, Aug 26 '16 at 08:48
@davidkonrad, in my code i am trying to access dtInstance by 'vm' only. In the SO link it was given as scope. I have modified my question. — Suriya Rakhunathan, Aug 26 '16 at 09:33
@davidkonrad, i have closed my previous question with the fix i have done. Please help me with "dtInstance" and page number problem. — Suriya Rakhunathan, Aug 26 '16 at 09:43
how can i get current page number? assume i have navigated to 4th page of table and i want to see page number as 4? — Suriya Rakhunathan, Aug 26 '16 at 13:33
If you are on page 4, then `vm.dtInstance.DataTable.page()` will return 3. It is really straight forward. — davidkonrad, Aug 26 '16 at 13:39
@davidkonrad, thanks a lot for your suggestions. I debugged the angular datatable and understood what you were referring. I am able to fix the issue with drawcallback function. — Suriya Rakhunathan, Aug 29 '16 at 07:40

Suriya Rakhunathan · Answer 1 · 2016-08-29T07:38:10.130

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

Angular datatable - get current page & Total page

1 Answers1

Linked