Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.3k views
in Technique[技术] by (71.8m points)

angularjs - Angular datatable - get current page & Total page

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

enter image description here

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
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.

enter image description here

~~Suriya


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...