angularjs - 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.

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

Answer 1

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